標籤：拖拉 衝突 點擊
文章：http://bbs.csdn.net/topics/390785395?page=1#post-397369340
如何將拖拉事件跟點擊事件分離？
需要做到：拖拉時不觸動點擊事件
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> js拖拽組件1 </title><script type="text/javascript" src="Drag.js"></script> <script type="text/javascript"> window.onload = function(){Drag.init(document.getElementById("handle1"),document.getElementById("handle1"));//handle和dragBody都是一樣的 這是就相當於是拖動handle本身} </script> <style type="text/css"> </style> </head> <body> <div id="handle1" style="border:1px solid red;width:150px;height:30px;position:absolute;left:100px;top:100px;" onclick="alert(2);">拖拉我、點擊我</div> </body></html>
var Drag={ "obj":null,"init":function(handle, dragBody, e){if (e == null) {handle.onmousedown=Drag.start;}handle.root = dragBody;if(isNaN(parseInt(handle.root.style.left)))handle.root.style.left="0px";if(isNaN(parseInt(handle.root.style.top)))handle.root.style.top="0px";//確保後來能夠取得top值handle.root.onDragStart=new Function();handle.root.onDragEnd=new Function();handle.root.onDrag=new Function();if (e !=null) {var handle=Drag.obj=handle;e=Drag.fixe(e);var top=parseInt(handle.root.style.top);var left=parseInt(handle.root.style.left);handle.root.onDragStart(left,top,e.pageX,e.pageY);handle.lastMouseX=e.pageX;handle.lastMouseY=e.pageY;document.onmousemove=Drag.drag;document.onmouseup=Drag.end;}},"start":function(e){var handle=Drag.obj=this;e=Drag.fixEvent(e);var top=parseInt(handle.root.style.top);var left=parseInt(handle.root.style.left);//alert(left)//一般情況下 left top 在初始的時候都為0handle.root.onDragStart(left,top,e.pageX,e.pageY);handle.lastMouseX=e.pageX;handle.lastMouseY=e.pageY;document.onmousemove=Drag.drag;document.onmouseup=Drag.end;return false;},"drag":function(e){//這裡的this為document 所以拖動對象只能儲存在Drag.obj裡e=Drag.fixEvent(e);var handle=Drag.obj;var mouseY=e.pageY;var mouseX=e.pageX;var top=parseInt(handle.root.style.top);var left=parseInt(handle.root.style.left);//這裡的top和left是handle.root距離瀏覽器邊框的上邊距和左邊距var currentLeft,currentTop;currentLeft=left+mouseX-handle.lastMouseX;currentTop=top+(mouseY-handle.lastMouseY);//上一瞬間的上邊距加上滑鼠在兩個瞬間移動的距離 得到現在的上邊距handle.root.style.left=currentLeft +"px";handle.root.style.top=currentTop+"px";//更新當前的位置handle.lastMouseX=mouseX;handle.lastMouseY=mouseY;//儲存這一瞬間的滑鼠值 用於下一次計算位移handle.root.onDrag(currentLeft,currentTop,e.pageX,e.pageY);//調用外面對應的函數return false;},"end":function(){document.onmousemove=null;document.onmouseup=null;Drag.obj.root.onDragEnd(parseInt(Drag.obj.root.style.left),parseInt(Drag.obj.root.style.top));Drag.obj=null;},"fixEvent":function(e){//格式化事件參數對象if(typeof e=="undefined")e=window.event;if(typeof e.layerX=="undefined")e.layerX=e.offsetX;if(typeof e.layerY=="undefined")e.layerY=e.offsetY;if(typeof e.pageX == "undefined")e.pageX = e.clientX + document.body.scrollLeft - document.body.clientLeft;if(typeof e.pageY == "undefined")e.pageY = e.clientY + document.body.scrollTop - document.body.clientTop;return e;}};
問題應該出在onmouseup時也調用了onclick方法。網上找了方法，其中，http://www.cnblogs.com/A_ming/archive/2013/03/08/2950346.html 不知如何應用進來。
後來想了另一個方法，就是添加一個公開變數，在onmousedown、onmouseup、onclick分別擷取滑鼠的座標，並記錄在公開變數裡，做了個小例子區分他們執行的順序，如下：
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><div id="x" style="border:1px solid #ddd;">xxxxxxxxxxxxxxxxxxxxxxxx</div></body></html><script type="text/javascript">var d = document.getElementById("x");var shubiaoX = 0;d.onmousedown=function(){console.log("mousedown");shubiaoX = event.screenX;console.log("1:"+shubiaoX);}d.onmouseup=function(){console.log("mouseup");shubiaoX = event.screenX;console.log("2:"+shubiaoX);}d.onclick=function(){console.log("click");shubiaoX = event.screenX;console.log("3:"+shubiaoX);}</script>
原位置點擊：
mousedownmouse.html:201:169mouse.html:22mouseupmouse.html:252:169mouse.html:27clickmouse.html:153:169拖動點擊：
mousedownmouse.html:201: 360 mouse.html:22mouseupmouse.html:252: 473 mouse.html:27clickmouse.html:153: 473上面可以發現，拖動點擊的mousedown後移動，mouseup與click事件滑鼠座標發生變化，且一樣。
故而，可以判斷滑鼠的座標來區分是拖動點擊還是原地點擊~
當然這個是個土的辦法，如果有更好的請回複~
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
