JS如何將拖拉事件與點擊事件分離？

 

如何將拖拉事件跟點擊事件分離？
需要做到：拖拉時不觸動點擊事件

 

<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>拖拉我、點擊我
Drag.js

 

 

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分別擷取滑鼠的座標，並記錄在公開變數裡，做了個小例子區分他們執行的順序，如下：

 

xxxxxxxxxxxxxxxxxxxxxxxx
發現執行的順序為onmousedown、onmouseup、onclick

 

原位置點擊：

mousedown mouse.html:20 1:169 mouse.html:22 mouseup mouse.html:25 2:169 mouse.html:27 click mouse.html:15 3:169

 

拖動點擊：

 

mousedown mouse.html:20 1: 360 mouse.html:22 mouseup mouse.html:25 2: 473 mouse.html:27 click mouse.html:15 3: 473

 

上面可以發現，拖動點擊的mousedown後移動，mouseup與click事件滑鼠座標發生變化，且一樣。

 

故而，可以判斷滑鼠的座標來區分是拖動點擊還是原地點擊~

 

當然這個是個土的辦法，如果有更好的請回複~