Share the solution to the conflict between jquery event dblclick and click-JS Tutorial-php.cn

Share the solution to the conflict between jquery event dblclick and click

黄舟

Release： 2017-06-27 10:42:00

Original

1970 people have browsed it

In jquery click and dblclick are both click events, but in dblclick event is a repeated click on the click event, so if we do it at the same time, it will conflict, as follows Let's look at the analysis.

In the double-click event (dblclick), among the two click events (click) triggered, the first click event (click) will be blocked, but the second one will not.

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").slideToggle();
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>切换</button>
</body>

Copy after login

That is to say, a double-click event (dblclick) will return a click event (click) result and a double-click event (dblclick) result. Instead of the result of a double-click event (dblclick) and the result of two click events (click).

dblclick()When an element is double-clicked, the dblclick event occurs. A click occurs when the mouse pointer is over an element and the left mouse button is pressed and released. If two clicks occur within a short period of time, it is a double click event.

<script type="text/javascript">
$(document).ready(function(){
  $("button").dblclick(function(){
    $("p").slideToggle();
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>请双击此处</button>
</body>

Copy after login

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

var timer = null; 
$(&#39;button&#39;).live(&#39;click&#39;, function(event){ 
    timer && clearTimeout(timer); 
    timer = setTimeout(function(){ 
        console.log(event.type); 
    },300); 
}).live(&#39;dblclick&#39;, function(event){ 
    timer && clearTimeout(timer); 
    console.log(event.type); 
});

Copy after login

The above is the detailed content of Share the solution to the conflict between jquery event dblclick and click. For more information, please follow other related articles on the PHP Chinese website!