IE9以下浏览器当页面有文字和图片等多个元素的时候,拖拽可能会选中了文字。
事件捕获:setCapture() 只在IE下才起作用的。作用是把页面所有元素事件都指向当前对象事件。例如:aBtn.setCapture(); 就是把页面所有事件都指向了按钮对象,不管在页面按哪个位置都会触发按钮的函数。
<script> window.onload=function() { var oBtn=document.getElementById('btn'); oBtn.onclick=function() { alert('a'); }; oBtn.setCapture(); //不管在浏览器点击哪个位置,都会弹出a }; </script>
释放捕获:releaseCapture()
JS代码:
View Code
<script> window.onload=function() { var oDiv=document.getElementById('div'); var disX=0; var disY=0; oDiv.onmousedown=function(ev) { var oEvent=ev||event; disX=oEvent.clientX-oDiv.offsetLeft; disY=oEvent.clientY-oDiv.offsetTop; if(oDiv.setCapture) //兼容IE { oDiv.onmousemove=mousemove; oDiv.onmouseup=mouseUp; oDiv.setCapture(); } else //兼容FireFox Chrome { document.onmousemove=mousemove; document.onmouseup= mouseUp; } function mousemove(ev) { var oEvent=ev||event; var oLeft=oEvent.clientX-disX; var oTop=oEvent.clientY-disY; oDiv.style.left=oLeft+'px'; oDiv.style.top=oTop+'px'; }; function mouseUp() { this.onmousemove=null; this.onmouseup=null; if(oDiv.releaseCapture) { oDiv.releaseCapture(); } } return false; //阻止FireFox的默认事件 bug }; }; </script>
完整代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> div{width:200px;height:200px;background:red;position:absolute;top:0;left:0;} </style> <script> window.onload=function() { var oDiv=document.getElementById('div'); var disX=0; var disY=0; oDiv.onmousedown=function(ev) { var oEvent=ev||event; disX=oEvent.clientX-oDiv.offsetLeft; disY=oEvent.clientY-oDiv.offsetTop; if(oDiv.setCapture) //兼容IE { oDiv.onmousemove=mousemove; oDiv.onmouseup=mouseUp; oDiv.setCapture(); } else //兼容FireFox Chrome { document.onmousemove=mousemove; document.onmouseup= mouseUp; } function mousemove(ev) { var oEvent=ev||event; var oLeft=oEvent.clientX-disX; var oTop=oEvent.clientY-disY; oDiv.style.left=oLeft+'px'; oDiv.style.top=oTop+'px'; }; function mouseUp() { this.onmousemove=null; this.onmouseup=null; if(oDiv.releaseCapture) { oDiv.releaseCapture(); } } return false; //阻止FireFox的默认事件 bug }; }; </script> </head> <body>您付款了法拉克fai<br /> gsdfg sfdgsdfhfadslkf k <div id="div"> 您付款了法拉克fai<br /> gsdfg sfdgsdfhfadslkf k </div> 您付款了法拉克fai<br /> gsdfg sfdgsdfhfadslkf k </body> </html>