How to implement only double click event in jQuery? How to implement double-click event (detailed explanation)

The content of this article is to introduce how jQuery only implements double-click events? How to implement double-click event (detailed explanation). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In jQuery's event binding, two click events (click) can be triggered when executing a double-click event (dblclick). That is, a label element (such as p, etc.), if the element is bound to both a click event (click) and a double-click event (dblclick), then when the click event (click) is executed, the double-click event (dblclick) will not be triggered, and the double-click event will not be triggered. event (dblclick) will trigger two click events (click).

Let’s first look at the execution sequence of click events:

Click (click): mousedown, mouseout, click;

Double-click (dblclick): mousedown, mouseout, click, mousedown, mouseout, click, dblclick;

In the double-click event (dblclick), among the two click events (click) triggered, the first click event (click) will Got blocked, but not the second time. That is to say, the double-click event (dblclick) will return the result of a click event (click) and the result of a double-click event (dblclick). Instead of the result of a double-click event (dblclick) and the result of two click events (click).

In this case, just eliminate the extra click event (click) and the problem will be solved.

setTimeout

Open directly in jQuery’s $(document).ready(function(){}):

//定义setTimeout执行方法
var TimeFn = null;

$('div').click(function () {
    // 取消上次延时未执行的方法
    clearTimeout(TimeFn);
    //执行延时
    TimeFn = setTimeout(function(){
        //do function在此处写单击事件要执行的代码
    },300);
});

$('div').dblclick(functin () {
     // 取消上次延时未执行的方法
    clearTimeout(TimeFn);
    //双击事件的执行代码
})

From the test results It seems that if the time between the two clicks is about 300ms, it is still easy for the click and dblclick events to be called "simultaneously", and if the interval is shorter or longer, there will only be click or dblclick. event.

At this point, we can avoid triggering a click (click) when double-clicking (dblclick) to a certain extent, thereby realizing a double-click event.

The above is the detailed content of How to implement only double click event in jQuery? How to implement double-click event (detailed explanation). For more information, please follow other related articles on the PHP Chinese website!