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 相关文章推荐
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
Aug 04 Javascript
用js脚本控制asp.net下treeview的NodeCheck的实现代码
Mar 02 Javascript
CSS和Javascript简单复习资料
Jun 29 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
jQuery实现tag便签去重效果的方法
Jan 20 Javascript
javascript RegExp 使用说明
May 21 Javascript
js转html实体的方法
Sep 27 Javascript
JS去掉字符串中所有的逗号
Oct 18 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
微信小程序实现蓝牙打印
Sep 23 Javascript
vue实现鼠标移过出现下拉二级菜单功能
Dec 12 Javascript
微信小程序 WeUI扩展组件库的入门教程
Apr 21 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求正负数数组中连续元素最大值示例
2014/04/11 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
jquery 与NVelocity 产生冲突的解决方法
2011/06/13 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
JS判断、校验MAC地址的2个实例
2014/05/05 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
EasyUI Pagination 分页的两种做法小结
2016/07/09 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
ubuntu编译nodejs所需的软件并安装
2017/09/12 NodeJs
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
小程序实现多列选择器
2019/02/15 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
python开发游戏的前期准备
2019/05/05 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
大学校庆策划书
2014/01/31 职场文书
会计与出纳自荐书范文
2014/03/16 职场文书
师德师风承诺书
2014/05/23 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
2015年销售内勤工作总结
2015/04/27 职场文书
环保证明
2015/06/23 职场文书
vue实现滑动解锁功能
2022/03/03 Vue.js