有思俱乐部学习园地

释放所有先前捕获的鼠标事件


释放所有先前捕获的鼠标事件

功能:捕获鼠标事件
当浏览器不支持releaseCapture的时候,给浏览器的全局HTMLElement设置releaseEvents事件,让页面上所有的元素都有releaseCapture这个事件
releaseCapture可以将鼠标事件锁定在指定的元素上,当元素捕获了鼠标事件后,该事件只能作用在当前元素上
事例:

未使用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");
    }
}
 _div.onmouseout=function(){
  if (!window.captureEvents) {
     _div.releaseCapture();
     console.log("释放成功1");
 }else {
     window.releaseEvents(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("捕获成功")}
$("#div")[0].onmouseout=function(this.releaseCapture();console.log("释放成功")}
点击提交后,鼠标移出可看到效果


注:当鼠标移到上面按钮时 弹出捕获当前元素,则释放成功

$("#but")[0].onmouseout=function(){this.releaseCapture();alert("释放先前捕获的鼠标事件")}

返回结果

工作人员

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