Because in JavaScript, mousedown, mouseup, and click execution orders are from left to right. More importantly, once the mousedown event is activated, the following two events will definitely be activated in normal situations (the methods that are not bound in the mousedown event use alert similar methods, because the pop-up object box prevents event delivery, that is, subsequent call events are lost). Usually, we only bind one click event to a tag. In fact, the triggering of the click event also calls mousedown, mouseup and other events, but their call period is very short, and we have not written related functions to bind these two events, so we will not notice it. Now suppose you want to register these events on a tag at the same time and bind the specified handling function. In actual development, you will encounter the problems I mentioned below.
First, test it through a simple example and discover the problem I mentioned to give you an intuitive impression, and then look at my solution.
<div onmousedown="mouseDownFun();" onmouseup="mouseUpFun();" onclick="clickFun();" style="background:#CCC; border:3px solid #999; width:200px; height:200px; padding:10px"></div>
<input style="margin-top:10px" type="button" onclick="('div1').innerHTML='';" value="Clear information" />
<script type="text/javascript">
function mouseDownFun()
{
('div1').innerHTML += 'mouseDown<br/>';
}
function mouseUpFun()
{
('div1').innerHTML += 'mouseUp<br/>';
}
function clickFun()
{
('div1').innerHTML += 'click<br/>';
}
</script>
Now suppose there is a requirement: press mousedown on an image to start dragging the image, and mouseup release occurs on this image and the relevant information of the image is displayed. Under normal circumstances, if you want to execute the mouseup-bound function, the mousedown-bound function is also executed, and it is still executed first. That is to say, when you view the image information, the image is also dragging. In fact, what you really hope is to execute one of the methods every time. For example, when you press the mouse and release it quickly, you actually want to see the image information, not drag the image; on the contrary, if you press the mouse and pause for a while, it means that you want to prepare to drag the image, and do not implement the method of viewing the information at this time. How to do this? According to the above analysis, I found that the setTimeout function can be used to handle such needs (of course, if you find a better solution, you must remember to share it with me, ha). The complete example is given below, which is very simple, and has been commented and will not be explained separately:
<div onmousedown="mouseDownFun();" onmouseup="mouseUpFun();" style="background:#CCC; border:3px solid #999; width:200px; height:200px; padding:10px"></div>
<input style="margin-top:10px" type="button" onclick="('div1').innerHTML='';" value="Clear information" />
<script type="text/javascript">
var doMouseDownTimmer = null;
var isMouseDownDoing = false;
function mouseDownFun()
{
//Because mouseDownFun will be called every time, reinitialize this variable here
isMouseDownDoing = false;
//The real processing code of onmousedown is called after delaying by 200 milliseconds. If the mouse is released within 200 milliseconds and the doMouseDownTimmer is cleared, then even if onmousedown is called, the doMouseDown function is not called as the code that onmousedown is actually to be processed.
doMouseDownTimmer = setTimeout(doMouseDown,200);
}
function doMouseDown()
{
//If this method is called after 200 milliseconds, set isMouseDownDoing to true, indicating that mouseDown has actually been processed, and mouseUp will not be processed after that.
isMouseDownDoing = true;
('div1').innerHTML += 'mouseDown<br/>';
}
function mouseUpFun()
{
if (!isMouseDownDoing)
{
clearTimeout(doMouseDownTimmer); //You can come here, no matter how many times you clear the doMouseDownTimmer first, otherwise the doMouseDown method will still be called after 200 milliseconds.
('div1').innerHTML += 'mouseUp<br/>';
}
}
</script>
Related topics: Because the click events that are often used in mousedown and mouseup are run after mousedown, we can use mouseup instead of click (this is how the above example is used). At this time, do not register the click event on the Element. Of course, if possible, you can also use mousedown instead of click, and the incident response will be faster. Among them, you can see such writing methods in some Google products, such as Gmail.
First, test it through a simple example and discover the problem I mentioned to give you an intuitive impression, and then look at my solution.
Copy the codeThe code is as follows:
<div onmousedown="mouseDownFun();" onmouseup="mouseUpFun();" onclick="clickFun();" style="background:#CCC; border:3px solid #999; width:200px; height:200px; padding:10px"></div>
<input style="margin-top:10px" type="button" onclick="('div1').innerHTML='';" value="Clear information" />
<script type="text/javascript">
function mouseDownFun()
{
('div1').innerHTML += 'mouseDown<br/>';
}
function mouseUpFun()
{
('div1').innerHTML += 'mouseUp<br/>';
}
function clickFun()
{
('div1').innerHTML += 'click<br/>';
}
</script>
Now suppose there is a requirement: press mousedown on an image to start dragging the image, and mouseup release occurs on this image and the relevant information of the image is displayed. Under normal circumstances, if you want to execute the mouseup-bound function, the mousedown-bound function is also executed, and it is still executed first. That is to say, when you view the image information, the image is also dragging. In fact, what you really hope is to execute one of the methods every time. For example, when you press the mouse and release it quickly, you actually want to see the image information, not drag the image; on the contrary, if you press the mouse and pause for a while, it means that you want to prepare to drag the image, and do not implement the method of viewing the information at this time. How to do this? According to the above analysis, I found that the setTimeout function can be used to handle such needs (of course, if you find a better solution, you must remember to share it with me, ha). The complete example is given below, which is very simple, and has been commented and will not be explained separately:
Copy the codeThe code is as follows:
<div onmousedown="mouseDownFun();" onmouseup="mouseUpFun();" style="background:#CCC; border:3px solid #999; width:200px; height:200px; padding:10px"></div>
<input style="margin-top:10px" type="button" onclick="('div1').innerHTML='';" value="Clear information" />
<script type="text/javascript">
var doMouseDownTimmer = null;
var isMouseDownDoing = false;
function mouseDownFun()
{
//Because mouseDownFun will be called every time, reinitialize this variable here
isMouseDownDoing = false;
//The real processing code of onmousedown is called after delaying by 200 milliseconds. If the mouse is released within 200 milliseconds and the doMouseDownTimmer is cleared, then even if onmousedown is called, the doMouseDown function is not called as the code that onmousedown is actually to be processed.
doMouseDownTimmer = setTimeout(doMouseDown,200);
}
function doMouseDown()
{
//If this method is called after 200 milliseconds, set isMouseDownDoing to true, indicating that mouseDown has actually been processed, and mouseUp will not be processed after that.
isMouseDownDoing = true;
('div1').innerHTML += 'mouseDown<br/>';
}
function mouseUpFun()
{
if (!isMouseDownDoing)
{
clearTimeout(doMouseDownTimmer); //You can come here, no matter how many times you clear the doMouseDownTimmer first, otherwise the doMouseDown method will still be called after 200 milliseconds.
('div1').innerHTML += 'mouseUp<br/>';
}
}
</script>
Related topics: Because the click events that are often used in mousedown and mouseup are run after mousedown, we can use mouseup instead of click (this is how the above example is used). At this time, do not register the click event on the Element. Of course, if possible, you can also use mousedown instead of click, and the incident response will be faster. Among them, you can see such writing methods in some Google products, such as Gmail.