快捷導(dǎo)航

js鼠標(biāo)單擊和雙擊事件沖突問題的快速解決方法

更新時間：2016年07月11日 10:24:50 投稿：jingxian

下面小編就為大家?guī)硪黄猨s鼠標(biāo)單擊和雙擊事件沖突問題的快速解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

情況一

如果在一個DOM對象上同時綁定單擊(click)和雙擊(dblclick)事件，當(dāng)在這個DOM對象上發(fā)生雙擊事件時，第一次點擊（click）會觸發(fā)一次單擊（click）事件，第二次點擊（連續(xù)的）也會觸發(fā)雙擊（dblclick）事件，還是會觸發(fā)單擊（click）事件（IE7與 firefox）。

解決方法：

<button onclick="test(1)" ondblclick="test(2)"></button>
<script language="javascript">
var i = 1;
function test(n)  {
i = n; 
var val = setTimeout("call();",250); 
if(i==2){
clearTimeout(val);
}
}
function  call()  { 
if(i==1){
alert('click');
}else if(i==2){
alert('dblclick');
}
} 
</script>

解釋：

第一次點擊記錄下點擊的時間，并設(shè)置單擊事件的Timeout（250ms比較合適），第二次點擊時判斷此時點擊的時間與上次點擊的時間間隔，如果小于指定的事件間隔（比如250ms），則判斷為雙擊事件，并clear已設(shè)置的Timeout（避免觸發(fā)單擊事件）。

第二種：

<title>區(qū)分單擊和雙擊-m.fzitv.net</title>
<script type="text/javascript">
var flag=0;
function clickTest()
{
 if(!flag)
 {
 setTimeout("tt2();",300);
 }
 flag++;
}
function reset()
{
 flag=0;
}
function singleClick()
{
 var result=document.getElementByIdx_x('result');
 result.innerHTML=result.innerHTML+"click<br>";
 reset();
}
function dobuleClick()
{
 var result=document.getElementByIdx_x('result');
 result.innerHTML=result.innerHTML+"dobule click<br>";
 reset();
}
function tt2()
{
 if(flag==1)
 {
 singleClick();
 }
 else
 {
 dobuleClick();
 }
}
</script>
</head>
<body>
<input type="button" ondblclick="clickTest();" onclick="clickTest();" value="click test" />
<div id="result"></div>

以上這篇js鼠標(biāo)單擊和雙擊事件沖突問題的快速解決方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JS中的幾種循環(huán)和跳出方式
這篇文章介紹了JS中的幾種循環(huán)和跳出方式，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-07-07
前端qrcode生成二維碼安裝及使用示例詳解
二維碼作為一種快速的信息識別工具,被廣泛應(yīng)用于各行各業(yè),在互聯(lián)網(wǎng)的時代,生成二維碼已經(jīng)成為了一項必需的技能,這篇文章主要給大家介紹了關(guān)于前端qrcode生成二維碼安裝及使用示例的相關(guān)資料,需要的朋友可以參考下
2024-08-08
JS如何實現(xiàn)網(wǎng)站中PC端和手機(jī)端自動識別并跳轉(zhuǎn)對應(yīng)的代碼
這篇文章主要介紹了JS如何實現(xiàn)網(wǎng)站中PC端和手機(jī)端自動識別并跳轉(zhuǎn)對應(yīng)的代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
關(guān)于微信jssdk實現(xiàn)多圖片上傳的一點心得分享
這篇文章主要介紹了關(guān)于微信jssdk實現(xiàn)多圖片上傳的一點心得分享,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-12-12
客戶端js性能優(yōu)化小技巧整理
說起javascript無人不知無人不曉吧，下面是一些關(guān)于客戶端JS性能的一些優(yōu)化的小技巧，希望對大家有所幫助
2013-11-11
ES6新特性七：數(shù)組的擴(kuò)充詳解
這篇文章主要介紹了ES6新特性之?dāng)?shù)組的擴(kuò)充,結(jié)合實例形式分析了ES6數(shù)組操作的常見方法與相關(guān)使用技巧,需要的朋友可以參考下
2017-04-04
淺談webpack打包之后的文件過大的解決方法
這篇文章主要介紹了淺談webpack打包之后的文件過大的解決方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-03-03
JavaScript判斷數(shù)據(jù)類型有幾種方法及區(qū)別介紹
這篇文章主要介紹了JavaScript判斷數(shù)據(jù)類型有幾種方法及區(qū)別介紹,本文給大家分享多種方法通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-09-09
Raphael帶文本標(biāo)簽可拖動的圖形實現(xiàn)代碼
Javascript和Raphael順便學(xué)習(xí)了一下,主要是為了實現(xiàn)一個可拖動的矩形同時矩形上還得顯示標(biāo)簽，網(wǎng)上關(guān)于這方面的知識提的很是于是本人自不量力寫了一下，感興趣的你可不要錯過了哈，希望可以幫助到你
2013-02-02
javascript開發(fā)隨筆二動態(tài)加載js和文件
js無非就是script標(biāo)簽引入頁面，但當(dāng)項目越來越大的時候，單頁面引入N個js顯然不行，合并為單個文件減少了請求數(shù)，但請求的文件體積卻很大
2011-11-11