How does JS separate drag events from click events?

 

How to separate a drag event from a click event?
To do this, do not touch the click event during the drag operation.

 

<Script type = text/javascript src = Drag. js> </script> <script type = text/javascript> window. onload = function () {Drag. init (document. getElementById (handle1), document. getElementById (handle1); // both handle and dragBody are the same. This is equivalent to dragging handle itself.} </script> Drag me, click me
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; // ensure that the top value handle can be obtained later. 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) // In general, left top is 0handle at the beginning. 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) {// here this is document, so the Drag object can only be saved in drag. obj in 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); // The top and left here are handle. root from the browser border top margin and left away var currentLeft, currentTop; currentLeft = left + mouseX-handle.lastMouseX; currentTop = top + (mouseY-handle.lastMouseY ); // The top margin of the last instant plus the mouse's distance between the two moments to get the current top margin handle. root. style. left = currentLeft + px; handle. root. style. top = currentTop + px; // update the current location handle. lastMouseX = mouseX; handle. lastMouseY = mouseY; // Save the mouse value for this moment for the next computing shift handle. root. onDrag (currentLeft, currentTop, e. pageX, e. pageY); // call the function 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) {// format the event parameter object 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 ;}};

 

The problem should be that the onclick method is also called during onmouseup. I found a method on the Internet, where the http://www.cnblogs.com/A_ming/archive/2013/03/08/2950346.html does not know how to apply in.

Later, I thought about another method, that is, adding a public variable, getting the mouse coordinates in onmousedown, onmouseup, and onclick, respectively, and recording them in the public variables, A small example is provided to differentiate the execution sequence:

 

Xxxxxxxxxxxxxxxxxxxxxxxx
The execution sequence is onmousedown, onmouseup, and onclick.

 

Click at the original location:

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

 

Drag and click:

 

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

 

As shown in the preceding figure, the mouse coordinates of the mouseup and click events change and are the same.

 

Therefore, you can determine the coordinates of the mouse to distinguish between drag-and-click or in-situ click ~

 

Of course, this is a good solution. If there is better, please reply ~