兼容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(); } ```