A double click is not performed when a click is performed, but a double click is performed when a double click is performed.

Solution: if you want to double click without executing the click event, use timer to clear two click events, leaving a double click event.

<button onclick="single(event)" ondblclick="double(event)"> var timeOut = null; function single (e) { clearTimeout(timeOut); // Clear the first click event timeOut= setTimeout(function () {console.log(' click '); // Click the code execution area of the event //... }, time) } function double (e) { clearTimeout(timeOut); // Clear the second click event console.log(' double click ') // Double click the code execution area //... }Copy the code

With time=200, you know the js event loop mechanism, clicking on the event will add a task queue. Time =0 also adds a task queue. What’s the difference between time=0 and time=200?

Since the main thread has no work to do after the first click on the event, it executes the task immediately. On the second click, assume that the event is 150ms away from the first click. If your timer is less than 150ms, the first task queue will run out. To avoid executing the first task queue, the timer interval must be longer than the two-click interval. In order to clear the first click event, this 200 is a discretionary value that is greater than the interval.

The task was not executed after the first click because it was delayed by the timer and then cleared when the second click was made. What about the second click event? Immediately after the two clicks, a double click event is executed, the first of which clears the second click. At this point, both click times have been cleared, and you’re done.

This is the general process of the double click event.