JS鼠标3次点击事件实现代码及扩展思路
这几天看了一下JavaScript高级程序设计中的Dom事件相关内容，同时看到网上有关鼠标多次点击事件，鼠标事件是简单、常用的事件之一，于是便针对点击事件进行一些小的扩展和实现，增强对Dom事件的进一步理解。其中的实现和思路是自己总结的，有什么不对的地方还请大神们交流指正。
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次点击事件实现代码及扩展思路
这几天看了一下JavaScript高级程序设计中的Dom事件相关内容,同时看到网上有关鼠标多次点击事件,鼠标事件是简单.常用的事件之一,于是便针对点击事件进行一些小的扩展和实现,增强对Dom事件的进一步理解.其中的实现和思路是自己总结的,有什么不对的地方还请大神们交流指正. 1.制作一个通用的事件处理模块(原生实现) 以下实现基于AMD定义模块方式: /** * 浏览器兼容事件处理组件 */ define(function () { var EventUtil = { // 添加事件监听 add
-
js中class的点击事件没有效果的解决方法
如下所示: $(".xx").clcik(function(){····}); 本来不用js生成类,是有点击效果的一但js里写,就没有点击效果了,如下: 做如下修改即可,监听document 以上就是小编为大家带来的js中class的点击事件没有效果的解决方法全部内容了,希望大家多多支持我们~
-
JS 循环li添加点击事件 （闭包的应用）
废话不多说了,直接给大家贴代码了,具体代码如下所述: var aLi = document.querySelectorAll('.article-tab li'); for (var i = 0; i <= aLi.length; i++) { (function(){ var p = i aLi[i].onclick = function() { alert(p); } })(); } 以上所述是小编给大家介绍的JS 循环li添加点击事件 (闭包的应用),希望对大家有所帮助,如果大家有任何疑问
-
js和jquery实现监听键盘事件示例代码
项目中要监听键盘组合键CTRL+C,以便做出对应的响应.查了一些方法但是其兼容性和稳定性不是很高,最终得到如下方法,经测试在Firfox.Chrome.IE中均可以使用. 一.使用javascript实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function keyListener(e
-
Android TV开发：使用RecycleView实现横向的Listview并响应点击事件的代码
本文讲述了Android TV开发:使用RecycleView实现横向的Listview并响应点击事件的代码.分享给大家供大家参考,具体如下: 1.先贴出自己的效果图(可横向滚动,并响应item点击事件): 2.关于点击事件的实现细节 核心:使用接口回调 在adapter中自己定义了个接口,然后在onBindViewHolder中去为holder.itemView去设置相应的监听最后回调我们设置的监听. class HomeAdapter extends RecyclerView.Adapter
-
jQuery on()方法绑定动态元素的点击事件实例代码浅析
之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态生成的标签点击了没反应,而live方法却能够支持,于是乎到处查资料,问网友,结果找了好久在一篇文章中终于找到了答案... jQuery 使用on绑定动态生成的元素时,不能直接用该对象操作,而是选择其非动态生成的父节点然后再找到本身才能达到效果.大家看看源码就知道了.生成的按钮基数项on方法点击无效l
-
js模拟点击事件实现代码
html: 复制代码 代码如下: <h3>请单击"提交",测试提交按钮的单击事件也被触发了.</h3> <button id="btn">提交</button> <form action="#" method="get" id="form"> <input type="text" name="site"
-
为GridView的行添加鼠标经过、点击事件的小例子
复制代码 代码如下: protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { e.Row.Attributes.Add("onmouseover", "c=this.style.backgroundColor;this.style.backgroundColor='#95B8FF'"); e.Row.Attributes.Add(&
-
jQuery实现鼠标滑过点击事件音效试听
废话不多说了,直接看效果图吧. 效果图如下: html代码: <div class="wrapper"> <h1 class="sub-section__title">eventType : </h1> <div class="center" style="margin-top: 40px;"> <div id="trigger-2-hover" cla
-
jQuery 三击事件实现代码
直接给出代码如下: 复制代码 代码如下: jQuery.event.special.tripleclick = { setup: function(data, namespaces) { var elem = this, $elem = jQuery(elem); $elem.bind('click', jQuery.event.special.tripleclick.handler); }, teardown: function(namespaces)