When onmousedown, onmouseup, and onclick are both applied to the same label node Element

In JavaScript, the execution sequence of mousedown, mouseup, and click is left to right. More importantly, once the mousedown event is activated, the next two events will be activated normally. We usually bind only one click event to a tag. In fact, events such as mousedown and mouseup are also called to trigger the click event, but their call cycle is very short, in addition, we didn't write the relevant functions to bind these two events, so we won't be aware of them. Now, if you want to register these events on a tag and bind the specified handler, you will encounter the following problems in actual development.

First, I will test it through a simple example and discover the problem I mentioned, so that you can have an intuitive impression, and then I will look at my solution.

< Div ID = "Div1" Onmousedown = "Mousedownfun ();" Onmouseup = "Mouseupfun ();" Onclick = "Clickfun ();" Style = "Background: # CCC; Border: 3px solid #999; width: 200px; Height: 200px; padding: 10px" > </ Div >

<InputStyle= "Margin-top: 10px"Type= "Button"Onclick= "Document. getelementbyid ('did1'). innerhtml = '';"Value= "Clear information" />

< Script Type = "Text/JavaScript" >
Function Mousedownfun ()
{
Document. getelementbyid ( ' Div1 ' ). Innerhtml + =   ' Mousedown <br/> ' ;
}

FunctionMouseupfun ()
{
Document. getelementbyid ('Div1'). Innerhtml+ = 'Mouseup <br/>';
}

Function Clickfun ()
{
Document. getelementbyid ( ' Div1 ' ). Innerhtml + =   ' Click <br/> ' ;
}
</ Script >

Now let us assume that we have the following requirement: Press mousedown on an image to start dragging the image, and when the mouseup mouse is released on the image, the relevant information of the image is displayed. Under normal circumstances, if you want to run the function bound to mouseup, the function bound to mousedown is executed first, that is, when you view the image information, the image is also being dragged. In fact, what you really want is to execute one of the methods each time. For example, when you press the mouse and release it quickly, you actually want to see the image information, instead of dragging the image, if you press the mouse and pause, it indicates that you want to drag the image. In this case, do not run the information display method. How can this be done? According to the above analysis, I found that the setTimeout function can be used to deal with this requirement (of course, if you find a better solution, remember to share it with me ). The following is a complete example, which is very simple. It is also annotated with no additional explanation:

< Div ID = "Div1" Onmousedown = "Mousedownfun ();" Onmouseup = "Mouseupfun ();" Style = "Background: # CCC; Border: 3px solid #999; width: 200px; Height: 200px; padding: 10px" > </ Div >

<InputStyle= "Margin-top: 10px"Type= "Button"Onclick= "Document. getelementbyid ('did1'). innerhtml = '';"Value= "Clear information" />

< Script Type = "Text/JavaScript" >
VaR Domousedowntimmer =   Null ;
VaR Ismousedowndoing =   False ;

Function Mousedownfun ()
{
// Because mousedownfun calls this variable every time, reinitialize it here.
Ismousedowndoing =   False ;
// Onmousedown can be called with a latency of 200 milliseconds.CodeIf the mouse is released within 200 milliseconds and the domousedowntimmer is cleared, even if onmousedown is called, The domousedown function is not called as the code to be processed by onmousedown.
Domousedowntimmer = SetTimeout (domousedown, 200 );
}

Function Domousedown ()
{
// If this method is called 200 milliseconds later, set ismousedowndoing to true, indicating that the actual processing of mousedown occurs, and then the mouseup will not be processed.
Ismousedowndoing =   True ;
Document. getelementbyid ( ' Div1 ' ). Innerhtml + =   ' Mousedown <br/> ' ;
}

Function Mouseupfun ()
{
If ( ! Ismousedowndoing)
{
Cleartimeout (domousedowntimmer ); // The domousedowntimmer can be cleared no matter which one or two days ago. Otherwise, the domousedown method will be called after 200 milliseconds.
Document. getelementbyid ( ' Div1 ' ). Innerhtml + =   ' Mouseup <br/> ' ;
}
}
</ Script >

Related Topics:Because the commonly used click events run after mousedown and mouseup, we can use mouseup instead of click (as shown in the preceding example ), at this time, do not register the click event on the element. Of course, if you can, you can also directly use mousedown instead of click, and the event response will be faster. Some Google Products see such a method, such as Gmail.