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:001968browse
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;
$('button').live('click', function(event){
timer && clearTimeout(timer);
timer = setTimeout(function(){
console.log(event.type);
},300);
}).live('dblclick', 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!