有思俱乐部学习园地

捕获鼠标事件


捕获鼠标事件的兼容

功能:捕获鼠标事件
当浏览器不支持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("捕获当前的鼠标事件")}

返回结果

工作人员

 
作者:廖泽愈
信息录入:廖泽愈