兼容IE8 ``` <div id="box1" style="width: 100px;height: 100px; background-color: aquamarine;position: absolute;"></div> <script type="text/javascript"> window.onload=function(){ var box1=document.getElementById("box1"); box1.onmousedown=function(event){ //设置box1捕获所有鼠标按下事件，此方法只有IE支持，在chrome中会报错 if(box1.setCapture){ box1.setCapture() } //简写 //box1.setCapture && box1.setCapture(); event=event||window.event; //div的偏移量 鼠标.clentx - 元素.offsetLeft //div的偏移量 鼠标.clentY - 元素.offsetTop var ol=event.clientX-box1.offsetLeft; var ot=event.clientY-box1.offsetTop; box1.onmousemove=function(event){ var left=event.clientX-ol; var top=event.clientY-ot; box1.style.left=left+"px"; box1.style.top=top+"px"; }; document.onmouseup=function(){ //当鼠标松开时,被拖拽元素固定在当前位置onmouseup取消document的onmousemove事件 document.onmousemove=null; //取消document的onmouseup事件 document.onmouseup=null; //当鼠标松开时,取消对事件的捕获 box1.releaseCapture && box1.releaseCapture(); } //取消默认行为 /* 当我们拖拽一个网页中的内容时,浏览器会默认去搜索引擎中搜索内容, 此时会导致拖拽功能的异常,这个是浏览器提供的默认行为, 如果不希望发生这个行为,则可以通过return false来取消默认行为 但是这招对1E8不起作用 解决办法设置box1.setCapture() 此方法只有IE支持，在chrome中会报错 */ return false; } } </script> ``` 封装： ``` window.onload=function(){ var box1=document.getElementById("box1"); function drag(element){ element.onmousedown=function(event){ //设置box1捕获所有鼠标按下事件，此方法只有IE支持，在chrome中会报错 if(element.setCapture){ element.setCapture() } //简写 //element.setCapture && element.setCapture(); event=event||window.event; //div的偏移量 鼠标.clentx - 元素.offsetLeft //div的偏移量 鼠标.clentY - 元素.offsetTop var ol=event.clientX-element.offsetLeft; var ot=event.clientY-element.offsetTop; element.onmousemove=function(event){ var left=event.clientX-ol; var top=event.clientY-ot; box1.style.left=left+"px"; box1.style.top=top+"px"; }; document.onmouseup=function(){ //当鼠标松开时,被拖拽元素固定在当前位置onmouseup取消document的onmousemove事件 document.onmousemove=null; //取消document的onmouseup事件 document.onmouseup=null; //当鼠标松开时,取消对事件的捕获 element.releaseCapture && element.releaseCapture(); } //取消默认行为 /* 当我们拖拽一个网页中的内容时,浏览器会默认去搜索引擎中搜索内容, 此时会导致拖拽功能的异常,这个是浏览器提供的默认行为, 如果不希望发生这个行为,则可以通过return false来取消默认行为 但是这招对1E8不起作用 解决办法设置box1.setCapture() 此方法只有IE支持，在chrome中会报错 */ return false; } } drag(box1); } ``` ``` window.onload=function(){ var btn1 =document.getElementById("bt1"); var btn2 =document.getElementById("bt2"); bt1.onclick=function(){ alert(1); } bt2.onclick=function(){ alert(2); } //设置bt1对 标按下相关的事件进行捕获 //当调用一个元素的setCapture ()方法以后,这个元素将会把下一次按下所有的鼠标按下相关的事件捕获到自身 bt1.setCapture(); } ```