捕获鼠标事件
捕获鼠标事件的兼容
功能:捕获鼠标事件
当浏览器不支持setCapture的时候,给浏览器的全局HTMLElement设置captureEvents事件,让页面上所有的元素都有setCapture这个事件
setCapture可以将鼠标事件锁定在指定的元素上,当元素捕获了鼠标事件后,该事件只能作用在当前元素上
事例:
未使用UForm框架前
html:
<div id="div" style="width:200px;height:100px;background:red"></div>
js:
var _div=document.getElementById("div");
_div.onmouseover=function(){
if (!window.captureEvents) {
_div.setCapture();
console.log("捕获成功1");
}else {
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
console.log("捕获成功2");
}
}
使用UForm框架
html:
<div id="div" style="width:200px;height:100px;background:red"></div>
js:
$("#div")[0].onmouseover=function(this.setCapture();console.log("捕获成功")}
点击提交后,鼠标移入可看到效果
注:当鼠标移到上面按钮时 弹出捕获当前的鼠标事件,则捕获成功
$("#but")[0].onmouseover=function(){this.setCapture();alert("捕获当前的鼠标事件")}
返回结果