Javascript separates the mouse click and drag events, and javascript drag

Javascript separates the mouse click and drag events, and javascript drag

In javascript, common DOM elements such as div all have three mouse events: onmousedown, onmousemove, and onmouseup.

<div id="div1" onmousedown="down();" onmouseup="up();" onmousemove="move();"></div>

 

The onmousemove event is triggered when you move the mouse over div1 or press the left button to drag the mouse. How can we differentiate these two events? How can I distinguish between mouse-clicked and drag-and-pull? You can register the onmousedown and onmouseup event processing functions to distinguish between the mouse and the drag. In onmousedown, you can record the position where the mouse is pressed, and in onmouseup, record the position where the mouse is played, then compare the gaps between the two positions. If the distance difference is not large, the cursor is clicked and then the cursor is clicked. If the Distance Difference is large, the cursor is dragged and then popped up. The following describes how to use setTimeout.

<Div id = "div1" onmousedown = "down ();" onmouseup = "up ();" onmousemove = "move (); "/> <script type =" text/javascript "> var timmerHandle = null; var isDrag = false; function down () {console. log ("mouse down. "); // because mouseDownFun is called every time, the isDrag variable is reinitialized here = false; // The latency is 100 ms timmerHandle = setTimeout (setDragTrue, 200 );} function setDragTrue () {isDrag = true;} function move () {// you can use isDrag to determine whether to move or drag} functi On up () {if (! IsDrag) {// clear doMouseDownTimmer first. Otherwise, the setGragTrue method will still be called clearTimeout (timmerHandle) after 200 milliseconds; console. log ("mouse up. ");} else {isDrag = false; console. log ("draging over. ") ;}}</script>

 

Using setTimeout is time-based and using coordinates is space-based.