Causes and solutions for MouseUp event loss in JS

When realizing the function similar to the EXCEL selection area, the MOUSEUP event is often lost, and a complete operation cannot be performed due to the lack of the MOUSEUP event.

If you want to drag the moving operation, you can refer to this article.

Two reasons are currently found:

Triggered the DRAG operation of the browser, resulting in MOUSEUP Lost.

    Due to the area where the mouse left the operation, MouseLeave caused MOUSEUP to be lost.

By performing the following code blocking system from the default Operation to prevent trigger DRAG operation: // E = e || WINDOW.EVENT; PAUSEEVENT (E); // block event bubbling /// not only to stopPropagation, but also preventDefaultfunction pauseEvent (e) {if (e.stopPropagation) e.stopPropagation (); if (e.preventDefault) e.preventDefault (); e.cancelBubble = true; e.returnValue = false; return False;}

By calling the event calling the PAUSEEVENT method, it is possible to prevent the DRAG operation, so the mouseUp loss can be avoided in the area. Even if you want to implement, it is DRAG operation, you can also create a DOM element that moves with the mouse.Implementation effect.
   
Since the mouse is moved to the area, the MOMSELEAVE operation is triggered, so in this case to listen to the MOMSELEAVE operation, when the operation is triggered You can stop or restore.

Special attention

When the mouse event is processed, it is necessary to consider whether to control the pressing the button.

There is a button attribute in the mouse event. This value indicates that the mouse presses one or more buttons. If the button is pressed, the value is multiple:

0: No button or no initialization

1: Right left mouse

4: Mouse wheel or medium key
8: The fourth button (usually “browser back” button)


16: Fifth button (usually “browser advancement”)


When multiple values, equivalent to | operation, ie the mouse is left and right, and 1 | 2 = 3. Determine if the left button can be pressed with value & 1! = 0, for example, left right, press 3 & 1! = 0 is true, and the left button is pressed.



The above is the full content of this article, I hope this paper will bring a certain help to everyone’s learning or work, if you have any questions You can leave a message to communicate, thank you for your support of Tumi Cloud.


© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment