Reasons and solutions for mouseup event loss in JavaScript

This article mainly introduces to you the relevant information about the reasons and solutions for the loss of mouseupevent in Javascript. The article gives detailed sample codes for your reference and study. Friends who need it, please follow the editor to learn.

Preface

When implementing a function similar to the Excel selected area, the mouseup event is often lost. Due to the lack of the mouseup event, resulting in A complete operation cannot be performed.

If you want to perform drag and drop operations, you can also refer to this article.

Cause

Currently found two reasons:

• Trigger The drag operation of the browser is disabled, causing the mouseup to be lost.

• Because the mouse left the operating area, mouseleave was triggered, causing mouseup to be lost.
  

Solution

##The first situation

Prevent the drag operation from being triggered by executing the following code to prevent the system's default operation:

//在事件中
e=e || window.event;
pauseEvent(e);

//阻止事件冒泡
//不仅仅要stopPropagation，还要preventDefault
function pauseEvent(e){
 if(e.stopPropagation) e.stopPropagation();
 if(e.preventDefault) e.preventDefault();
 e.cancelBubble=true;
 e.returnValue=false;
 return false;
}

The drag operation can be prevented by calling the pauseEvent method on the event, so mouseup loss can be avoided in the area. Even if what you want to implement is a drag operation, you can still achieve the effect by creating a DOM element that follows the mouse movement.

Second case

Since the mouse moves outside the area, the mouseleave operation is triggered, so in this case, the mouseleave operation must be monitored, and when the operation is triggered Can stop or restore

state .

Special Attention

When handling mouse events, you can also consider whether to control which key is pressed to allow the operation.

There is a button in the Mouse event

Attribute. This value indicates that the mouse has pressed one or more buttons. If there are multiple keys pressed, the value will be multiple:

0: No button or not initialized

1: Left mouse button

2: Right mouse button

4: Mouse wheel or middle button

8: The fourth button (usually the "Browser Back" button)

16: The fifth button (usually the "Browser Back" button) Forward")

When there are multiple values, it is equivalent to performing a | operation, that is, when the left and right mouse buttons are pressed at the same time, 1|2=3. You can use value&1!=0 to determine whether the left button is pressed. For example, when the left and right buttons are pressed at the same time, 3&1!=0 is true, indicating that the left button is pressed.

Summarize

The above is the detailed content of Reasons and solutions for mouseup event loss in JavaScript. For more information, please follow other related articles on the PHP Chinese website!