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 相关文章推荐
popdiv
Jul 14 Javascript
javascript delete 使用示例代码
Mar 29 Javascript
在JS中如何调用JSP中的变量
Jan 22 Javascript
js控制table合并具体实现
Feb 20 Javascript
Javascript连接多个数组不用concat来解决
Mar 24 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
Nov 20 Javascript
小程序点击图片实现自动播放视频
May 29 Javascript
jQuery实现鼠标滑动切换图片
May 27 jQuery
JSON 入门教程基础篇 json入门学习笔记
Sep 22 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
生成缩略图
2006/10/09 PHP
windows xp下安装pear
2006/12/02 PHP
php基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
jQuery 表单验证扩展(三)
2010/10/20 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
JavaScript数组方法大全(推荐)
2016/07/05 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
vue中appear的用法
2017/08/17 Javascript
javascript function(函数类型)使用与注意事项小结
2019/06/10 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
tornado捕获和处理404错误的方法
2014/02/26 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
python 实现敏感词过滤的方法
2019/01/21 Python
基于python的Paxos算法实现
2019/07/03 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
Python while true实现爬虫定时任务
2020/06/08 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
中国第一家杂志折扣订阅网:杂志铺
2016/08/30 全球购物
豆腐の盛田屋官网:日本自然派的豆乳面膜、肥皂、化妆水、乳液等
2016/10/08 全球购物
测试驱动开发的主要步骤是什么
2014/12/10 面试题
英文求职信结束语大全
2013/10/26 职场文书
费用会计岗位职责
2014/01/01 职场文书
产品推广策划方案
2014/05/10 职场文书
护士实习求职信
2014/06/22 职场文书
员工生日活动方案
2014/08/24 职场文书
第二次离婚起诉书
2015/05/18 职场文书
班级班风口号大全
2015/12/25 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
python读取mnist数据集方法案例详解
2021/09/04 Python