Home > Article > Web Front-end > Share the solution to the conflict between jquery event dblclick and click

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

黄舟Original: 2017-06-27 10:42:002002browse

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>

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>

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); 
});

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of the use of .dblclick() function in jQueryNext article：Detailed explanation of the use of .dblclick() function in jQuery

See more

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

Related articles