單擊和雙擊事件的沖突處理示例代碼
更新時間：2014年04月03日 16:42:15 作者：
這篇文章主要介紹了單擊和雙擊事件的沖突處理方法,需要的朋友可以參考下
先上代碼：
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(function () {
$("div").bind("click.a", function () { //單擊事件
$("body").append("<p>click事件</p>");
})
$("div").bind("dblclick.a", function () { //雙擊事件
$("body").append("<p>dblclick事件</p>");
})
$("div").bind("mouseover.a", function () { //鼠標(biāo)經(jīng)過元素的事件
$("body").append("<p>mouseover事件</p>");
})
$("div").bind("mouseout.a", function () { //鼠標(biāo)移出元素的事件
$("body").append("<p>mouseout事件</p>");
})
})
</script>
</head>
<body>
<div>jQuery命名空間</div>
</body>
效果如圖所示，我雙擊的同時，會先觸發(fā)兩個單擊事件，這是怎么回事？還有，如果我不想在雙擊的時候觸發(fā)
單擊事件，而僅僅只是觸發(fā)雙擊事件，那該怎么解決？我也有試過在雙擊的時候，先把單擊事件解綁，
可這樣一來，單擊事件又不能用了。。。
后來在論壇問別人，終于有了答案。那就是使用setTimeout()這個方法設(shè)置單擊事件的時間間隔，這個時間間隔一般
設(shè)為300ms，這樣在雙擊的時候，由于雙擊的時間間隔小于300ms，所以就不會產(chǎn)生click事件，而僅僅只是產(chǎn)生
dblclick事件。在雙擊事件里面，需要用clearTimeout()函數(shù)清除click事件的處理。代碼如下：
<script type="text/javascript" language="javascript">
$(function () {
var timer = null;
$("div").bind("click.a", function () { //單擊事件
clearTimeout(timer);
timer = setTimeout(function () { //在單擊事件中添加一個setTimeout()函數(shù)，設(shè)置單擊事件觸發(fā)的時間間隔
$("body").append("<p>click事件</p>");
}, 300);
})
$("div").bind("dblclick.a", function () { //雙擊事件
clearTimeout(timer); //在雙擊事件中，先清除前面click事件的時間處理
$("body").append("<p>dblclick事件</p>");
})
$("div").bind("mouseover.a", function () { //鼠標(biāo)經(jīng)過元素的事件
$("body").append("<p>mouseover事件</p>");
})
$("div").bind("mouseout.a", function () { //鼠標(biāo)移出元素的事件
$("body").append("<p>mouseout事件</p>");
})
})
</script>
如此，這個問題就解決了！
復(fù)制代碼 代碼如下:
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(function () {
$("div").bind("click.a", function () { //單擊事件
$("body").append("<p>click事件</p>");
})
$("div").bind("dblclick.a", function () { //雙擊事件
$("body").append("<p>dblclick事件</p>");
})
$("div").bind("mouseover.a", function () { //鼠標(biāo)經(jīng)過元素的事件
$("body").append("<p>mouseover事件</p>");
})
$("div").bind("mouseout.a", function () { //鼠標(biāo)移出元素的事件
$("body").append("<p>mouseout事件</p>");
})
})
</script>
</head>
<body>
<div>jQuery命名空間</div>
</body>
效果如圖所示，我雙擊的同時，會先觸發(fā)兩個單擊事件，這是怎么回事？還有，如果我不想在雙擊的時候觸發(fā)
單擊事件，而僅僅只是觸發(fā)雙擊事件，那該怎么解決？我也有試過在雙擊的時候，先把單擊事件解綁，
可這樣一來，單擊事件又不能用了。。。
后來在論壇問別人，終于有了答案。那就是使用setTimeout()這個方法設(shè)置單擊事件的時間間隔，這個時間間隔一般
設(shè)為300ms，這樣在雙擊的時候，由于雙擊的時間間隔小于300ms，所以就不會產(chǎn)生click事件，而僅僅只是產(chǎn)生
dblclick事件。在雙擊事件里面，需要用clearTimeout()函數(shù)清除click事件的處理。代碼如下：
復(fù)制代碼 代碼如下:
<script type="text/javascript" language="javascript">
$(function () {
var timer = null;
$("div").bind("click.a", function () { //單擊事件
clearTimeout(timer);
timer = setTimeout(function () { //在單擊事件中添加一個setTimeout()函數(shù)，設(shè)置單擊事件觸發(fā)的時間間隔
$("body").append("<p>click事件</p>");
}, 300);
})
$("div").bind("dblclick.a", function () { //雙擊事件
clearTimeout(timer); //在雙擊事件中，先清除前面click事件的時間處理
$("body").append("<p>dblclick事件</p>");
})
$("div").bind("mouseover.a", function () { //鼠標(biāo)經(jīng)過元素的事件
$("body").append("<p>mouseover事件</p>");
})
$("div").bind("mouseout.a", function () { //鼠標(biāo)移出元素的事件
$("body").append("<p>mouseout事件</p>");
})
})
</script>
如此，這個問題就解決了！
相關(guān)文章
jquery遍歷函數(shù)siblings()用法實(shí)例
這篇文章主要介紹了jquery遍歷函數(shù)siblings()用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jquery的siblings函數(shù)用于元素遍歷的相關(guān)技巧,需要的朋友可以參考下2015-12-12
由于各個瀏覽器中原生事件對象的 差異性 ，多數(shù) JS庫/框架 都或多或少的對原生事件對象進(jìn)行了修復(fù)及包裝。2011-06-06
利用jQuery來實(shí)現(xiàn)，其實(shí)就幾行代碼的事。即便如此，由于js語言的思維方式，還是一直沒有把握好，加上一個css的問題，導(dǎo)致弄了好久才出來效果。2009-12-12
這篇文章主要介紹了jQuery中:checkbox選擇器用法,實(shí)例分析了:checkbox選擇器的功能、定義及匹配復(fù)選框的使用技巧,需要的朋友可以參考下2015-01-01
使用jQuery的load方法設(shè)計動態(tài)加載及解決被加載頁面js失效問題
這篇文章主要介紹了使用jQuery的load方法設(shè)計動態(tài)加載及解決被加載頁面js失效問題,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
jQuery實(shí)現(xiàn)表格文本框淡入更改值后淡出效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)表格文本框淡入更改值后淡出效果的實(shí)現(xiàn)代碼,代碼簡單易懂，非常不錯，需要的朋友可以參考下2016-09-09
jQuery簡單實(shí)現(xiàn)的HTML頁面文本框模糊匹配查詢功能完整示例
這篇文章主要介紹了jQuery簡單實(shí)現(xiàn)的HTML頁面文本框模糊匹配查詢功能,涉及jQuery事件響應(yīng)模擬列表框的下拉數(shù)據(jù)展示與隱藏,以及元素遍歷、匹配等相關(guān)操作技巧,需要的朋友可以參考下2018-05-05
jquery遍歷table的tr獲取td的值實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨query遍歷table的tr獲取td的值實(shí)現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了如何在MVC應(yīng)用程序中使用Jquery，并附上示例，給需要的小伙伴們參考下吧2014-11-11
jQuery實(shí)現(xiàn)的解析本地 XML 文檔操作示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的解析本地 XML 文檔操作,結(jié)合實(shí)例形式分析了jQuery針對本地 XML 文檔的解析及ajax交互相關(guān)操作技巧,需要的朋友可以參考下2020-04-04