溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關JS鼠標3次點擊事件的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
1、制作一個通用的事件處理模塊（原生實現）
以下實現基于AMD定義模塊方式：
/**
* 瀏覽器兼容事件處理組件
*/
define(function () {
var EventUtil = {
// 添加事件監聽
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);// DOM2級事件
} else if (element.attachEvent) {
element.attachEvent('on' + type, handler);// DOM2級IE事件
} else {
element['on' + type] = handler;// DOM0級事件
}
},
// 移除事件監聽
removeHandler: function (element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent('on' + type, handler);
} else {
element['on' + type] = null;
}
},
// 獲取事件對象
getEvent: function (event) {
return event ? event : window.event;
},
// 獲取事件的目標元素
getTarget: function (event) {
return event.target || event.srcElement;
},
// 禁止事件默認行為
preventDefault: function (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 禁止事件冒泡
stopPropagation: function (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};
return EventUtil;
});2、鼠標3擊事件實現
鼠標點擊事件涉及的事件及執行觸發順序：
mousedown：鼠標任意鍵按下時觸發
mouseup：釋放鼠標按鈕時觸發
click：單擊
mousedown
mouseup
dblclick：雙擊
顯然，click是依賴dblclick的，可以考慮根據這兩個事件實現鼠標3次連續點擊觸發執行，設計觸發dblclick后監聽click事件，如果在短時間內觸發了click事件，則構成鼠標連續點擊3次的效果，具體實現如下源碼：
<div> <button id="button">鼠標3擊</button> </div>
js 代碼
require(['eventUtil'], function (EventUtil) {
var button = document.getElementById('button');
click3Event(button, function (event) {
console.log('3 click');
});
// 鼠標3擊事件
function click3Event(dom, fn) {
var handler = function (event) {
var event = EventUtil.getEvent(event),
target = EventUtil.getTarget(event);
var handler = function (event) {
var event = EventUtil.getEvent(event),
target = EventUtil.getTarget(event);
EventUtil.removeHandler(target, 'click', handler);
// 執行內容
fn();
};
EventUtil.addHandler(target, 'click', handler);
// 為防止雙擊后較長時間再次單擊執行事件
setTimeout(function () {
EventUtil.removeHandler(target, 'click', handler);
}, 300);
};
EventUtil.addHandler(dom, 'dblclick', handler);
}3、鼠標n擊事件實現
由鼠標3擊事件聯想到，如果實現n次鼠標連擊事件觸發如何實現。想到的思路是：禁用目標對象的dblclick事件，只用click事件進行連續點擊的邏輯判斷和操作，在連續的短時間內滿足點擊n次即可觸發執行，否則重新計算累加次數。具體的實現代碼如下：
require(['eventUtil'], function (EventUtil) {
var button = document.getElementById('button');
nclickEvent(4, button, function (event, n) {
console.log(n + ' click');
});
function nclickEvent (n, dom, fn) {
// 禁止雙擊事件
EventUtil.removeHandler(dom, 'dblclick', null);
var n = parseInt(n) < 1 ? 1 : parseInt(n),
count = 0,
lastTime = 0;
var handler = function (event) {
var currentTime = new Date().getTime();
count = (currentTime - lastTime < 300) ? count + 1 : 0;
lastTime = new Date().getTime();
if (count >= n - 1) {
fn(event, n);
count = 0;
}
};
EventUtil.addHandler(dom, 'click', handler);
}
});最后給大家分享一個jquery版的代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">234234234234234</div>
<script src="js/jquery.min.js"></script>
<script>
(function(){
var num=0,d=null;
$('#box').click(function(){
if(d){clearTimeout(d)}
d=setTimeout(function(){
num=0
},200);
num++;
if(num>=3){
alert(num+"\n ok")
}
})
})();
</script>
</body>
</html>感謝各位的閱讀！關于“JS鼠標3次點擊事件的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
