快捷導(dǎo)航

JS實現(xiàn)鼠標(biāo)單擊與雙擊事件共存

更新時間：2014年03月08日 10:03:30 作者：

本篇文章主要是對JS實現(xiàn)鼠標(biāo)單擊與雙擊事件共存的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助

一直都認為在Web開發(fā)中，雙擊事件都是少至又少地使用，直到最近項目需要，要在一個按鈕上綁定單擊與雙擊兩件事件。開始也覺得不就是給按鈕綁下兩個事件而已罷了……只是后來才明白，是我想得太簡單，在雙擊事件觸發(fā)的同時也會觸發(fā)單擊的~囧

通過一番研究后，終于利用JS中“setTimeout”延時執(zhí)行方法的辦法，將單擊延遲300毫秒執(zhí)行才解決了，代碼如下：

復(fù)制代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    
<title></title>    
<mce:script src="jquery-1.6.min.js" mce_src="jquery-1.6.min.js" type="text/javascript"></mce:script>    
<mce:script type="text/javascript">
<!--        
$(function () {            
var num = 0;            
var timeFunName = null;            
$("button").bind("click", function () {                
// 取消上次延時未執(zhí)行的方法                
clearTimeout(timeFunName);                
// 延時300毫秒執(zhí)行單擊                
timeFunName = setTimeout(function () {                    
num++;                    
$("textarea").val($("textarea").val() + "第" + num + "次事件，事件名：單擊/n");                
}, 300);            }).bind("dblclick", function () {                
// 取消上次延時未執(zhí)行的方法                
clearTimeout(timeFunName);                
num++;                
$("textarea").val($("textarea").val() + "第" + num + "次事件，事件名：雙擊/n");            
});        
});    
// --></mce:script>
</head>
<body>    
<textarea rows="20" cols="50"></textarea><button type="button">提交</button></body></html>

您可能感興趣的文章:

相關(guān)文章

基于JavaScript實現(xiàn)彈出框效果
彈出框在網(wǎng)站頁面中是必不可少的一部分，今天借助腳本之家平臺給大家分享使用js實現(xiàn)簡單的彈出框效果，感興趣的朋友一起學(xué)習(xí)吧
2016-02-02
JavaScript簡寫技巧
這篇文章主要介紹了JavaScript簡寫技巧，運用簡寫技巧，可以加快開發(fā)速度，讓開發(fā)工作事半功倍，大家感興趣的話可以參考本篇文章
2021-08-08
簡單實用的HTML到UBB轉(zhuǎn)換腳本工具實現(xiàn)說明
你也許是位樂于分享的技術(shù)人員，盡管你算不上什么技術(shù)高手，但是你都希望把自己所知道的通過博客與網(wǎng)友分享。為了讓更多人知道你的經(jīng)驗，你可能會努力把博文發(fā)布到專業(yè)論壇。
2009-11-11
IE關(guān)閉時判斷及AJAX注銷案例學(xué)習(xí)
當(dāng)關(guān)閉系統(tǒng)時會提示:你確定要退出系統(tǒng)嗎？退出請按'離開此頁'接下來將講解下IE關(guān)閉判斷及AJAX注銷，感興趣的你可不要錯過了哈，希望本例對你學(xué)習(xí)ajax有所幫助
2013-02-02
JavaScript+Canvas創(chuàng)建一個獨特的字符畫生成器
這篇文章主要介紹了如何使用 Canvas 和 JavaScript 創(chuàng)建一個獨特的字符畫生成器,通過此生成器,我們可以將圖片轉(zhuǎn)換為由字符構(gòu)成的作品,感興趣的可以了解下
2024-01-01
關(guān)于js中window.location.href,location.href,parent.location.href
關(guān)于js中window.location.href,location.href,parent.location.href,top.location.href的用法
2010-10-10
js如何實現(xiàn)淡入淡出效果
這篇文章主要介紹了原生js如何實現(xiàn)淡入淡出效果，文章為大家提供了一個已經(jīng)封裝好的代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2015-11-11
ES6學(xué)習(xí)筆記之let、箭頭函數(shù)和剩余參數(shù)
ES6為我們在函數(shù)的使用上也提供了許多的便捷的東西,下面這篇文章主要給大家介紹了關(guān)于ES6學(xué)習(xí)筆記之let、箭頭函數(shù)和剩余參數(shù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2022-09-09
五步輕松實現(xiàn)JavaScript HTML時鐘效果
這篇文章主要為大家詳細介紹了五步輕松實現(xiàn)JavaScript HTML時鐘效果的代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-11-11
JS返回只包含數(shù)字類型的數(shù)組實例分析
這篇文章主要介紹了JS返回只包含數(shù)字類型的數(shù)組實現(xiàn)方法,結(jié)合實例形式分析了循環(huán)遍歷數(shù)組及正則匹配兩種實現(xiàn)技巧,需要的朋友可以參考下
2016-12-12