首頁 > web前端 > js教程 > 主體

jquery事件dblclick與click衝突的解決方法分享

黄舟
發布: 2017-06-27 10:42:00
原創
2012 人瀏覽過

jquery中click與dblclick都是一個點擊事件,但是在dblclick事件是在click事件上重複點擊了,這樣如果我們同時的話就衝突了,下面我們來看分析。

在雙擊事件(dblclick),觸發的兩次點擊事件(click)中,第一次的點擊事件(click)會被封鎖掉,但第二次不會。

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

也就是說雙擊事件(dblclick)會回傳一次點選事件(click)結果和一次雙擊事件(dblclick) 結果。而不是一次雙擊事件(dblclick)結果和兩次點擊事件結果(click)。

dblclick()當雙擊元素時,會發生 dblclick 事件。當滑鼠指標停留在元素上方,然後按下並放開滑鼠左鍵時,就會發生一次 click。在很短的時間內發生兩次 click,即是一次 double click 事件。

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

如此這般的話,只需消滅掉多餘的一次點擊事件(click),這個問題就解決了。

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); 
});
登入後複製

以上是jquery事件dblclick與click衝突的解決方法分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板