javascript when onmousedown, onmouseup, onclick are applied to the same label node Element_javascript tips at the same time-JS Tutorial-php.cn

javascript when onmousedown, onmouseup, onclick are applied to the same label node Element_javascript tips at the same time

WBOY

Release： 2016-05-16 18:37:19

Original

1277 people have browsed it

Because in JavaScript, the execution order of mousedown, mouseup, and click is from left to right. More importantly, once the mousedown event is activated, under normal circumstances (methods not bound to the mousedown event use alert-like methods, because the pop-up object box is blocked Without event delivery (that is, subsequent call events are lost), the latter two events will definitely be activated. Usually we only bind one click event on a label. In fact, triggering the click event also calls mousedown, mouseup and other events, but their calling cycle is very short, and we have not written relevant functions to bind these two events, so Won't notice it. Now assume that you want to register these events on a label at the same time and bind the specified handler function. In actual development, you will encounter the problems I mentioned below.
First test through a simple example and discover the problem I mentioned, so that you can have an intuitive impression, and then look at my solution.

Copy code The code is as follows:

< ;/div>

Now suppose there is Such a requirement: press mousedown on a picture to start dragging the picture, and when mouseup occurs on the picture and the mouse is released, the relevant information of the picture is displayed. Under normal circumstances, if the function bound to mouseup is executed, the function bound to mousedown is also executed, and it is executed first, which means that 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 every time. For example, when you press the mouse and release it soon, you actually want to see the picture information, not drag the picture; on the contrary, if You press the mouse and pause for a moment, indicating that you want to prepare to drag the image. Do not execute the view information method at this time. How is this done? Based on the above analysis, I found that the setTimeout function can be used to handle such needs (of course, if you find a better solution, be sure to share it with me, ha). The complete example is given below, it is very simple, also added with comments, no additional explanation:

Copy the code The code is as follows:

Related topic: Because the commonly used click events run after mousedown and mouseup, we can use mouseup instead of click (this is how it is used in the above example). At this time, there is no need to register the click event on the Element. Of course, if possible, you can also directly use mousedown instead of click, and the event response will be faster. This writing method is seen in some Google products, such as Gmail.