JS鼠标3次点击事件实现代码及扩展思路


Posted in Javascript onSeptember 12, 2017

这几天看了一下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>

 到此文章就结束了,大家可以根据需要选择自己想用的代码。

Javascript 相关文章推荐
HTML DOM的nodeType值介绍
Mar 31 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
Feb 18 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
javascript学习笔记(八)正则表达式
Oct 08 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
在for循环中length值是否需要缓存
Jul 27 Javascript
js实现图片懒加载效果
Jul 17 Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 Javascript
ionic3双击返回退出应用的方法
Sep 17 Javascript
vue单文件组件无法获取$refs的问题
Jun 24 Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 Javascript
全网小程序接口请求封装实例代码
Nov 06 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 #Javascript
js数组实现权重概率分配
Sep 12 #Javascript
js 概率计算(简单版)
Sep 12 #Javascript
JavaScript面向对象精要(下部)
Sep 12 #Javascript
在Vue.js中使用Mixins的方法
Sep 12 #Javascript
JavaScript面向对象精要(上部)
Sep 12 #Javascript
JS库之ParticlesJS使用简介
Sep 12 #Javascript
You might like
php获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
Nginx实现反向代理
2017/09/20 Servers
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
javascript 伪数组实现方法
2010/10/11 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
JS实现样式清新的横排下拉菜单效果
2015/10/09 Javascript
JavaScript事件类型中UI事件详解
2016/01/14 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
python zip文件 压缩
2008/12/24 Python
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
12步教你理解Python装饰器
2016/02/25 Python
利用Python开发实现简单的记事本
2016/11/15 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
python3 requests库实现多图片爬取教程
2019/12/18 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
执行力心得体会
2013/12/31 职场文书
军训自我鉴定100字
2014/02/13 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
2016基督教会圣诞节开幕词
2016/03/04 职场文书
Redis超详细讲解高可用主从复制基础与哨兵模式方案
2022/04/07 Redis
从原生JavaScript到React深入理解
2022/07/23 Javascript