Get AndroidOaid: SDK+DEMO, version number: 1.0.23
File: n459.com/file/25127180-479069355
The following are irrelevant:
-------------------------------------------Dividing line----- ----------------------------------------
Today I want to talk about a very obscure thing. Generally, it may be difficult to touch, and it may be difficult to solve it. That is, when we use mousestart, mousemove, mouseup to do custom drag and drop effects, if we use click at this time, it will cause a drag penetration bug.
Mouseup simulates drag and click event conflict (QR code)
Click the above link, drag up and down with the mouse to scroll the list, and then you will find that if your mouse is on a specific list item, the view details will be triggered. In fact, the view details will be triggered after clicking , But here it is obvious that the custom drag and drop triggered the click. (Note: This bug is only available on pc, not on mobile phone)
Problem analysis
In fact, this kind of problem is difficult to encounter under normal circumstances. There will only be this kind of bug in some frameworks. Then let's see how this kind of problem occurs.
First of all, the custom drag and drop is formed by the combination of three events: mousestart, mousemove, and mouseup, but after mouseup is executed, click will definitely be executed. It is unavoidable and cannot be prevented with preventDefault, stopPropagation, and stopImmediatePropagation. In the demo of this example, the above method of preventing the propagation of the event is executed after mouseup, but it has no effect. Because the mouse event and the click event are not in the same series, they do not matter, so when a drag occurs, mouseup will be executed, and click will also be executed after mouseup is executed.
Solution
First of all, we can solve the simplest one, which is to trigger the click without dragging.
According to the statement just now, the click must be triggered after the mouseup event, but if there is no drag, that is, the mousemove event is not triggered, this situation is relatively simple, we can use a variable to record whether mousemove is triggered, and only trigger when mouseup occurs. The drag situation.
There is also a more complicated situation, that is, how to avoid click triggering when dragging occurs? At this time, we use a timing to control a global variable, so that the variable changes after 200 milliseconds, so the click is triggered soon after mouseup, less than 200ms, so it can be guaranteed that the variable has not changed, and the click event is used to detect This variable, if it is before the change, is not executed. The specific code is as follows:
Copy code
1 //Change a variable regularly in the mouseup event
2 window.mouseup_click_debug = true;
3 setTimeout(function() { 4 window.mouseup_click_debug = false; 5 }, 200); 6 //Check whether this variable is in the click event If there is a change, it means that mouseup has just been executed, and it is not executed here. 7 if(window.mouseup_click_debug) { 8 return false; 9}