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/jquery对上传文件格式过滤的方法
Jul 25 Javascript
javascript 图片上一张下一张链接效果代码
Mar 12 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
js模拟滚动条(横向竖向)
Feb 22 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
如何用JavaScript实现动态修改CSS样式表
May 20 Javascript
javaScript知识点总结(必看篇)
Jun 10 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
详解Node.js一行命令上传本地文件到服务器
Apr 22 Javascript
layui数据表格重载实现往后台传参
Nov 15 Javascript
JavaScript实现打砖块游戏
Feb 25 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缓存的详解
2013/05/15 PHP
利用curl抓取远程页面内容的示例代码
2013/07/23 PHP
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
JavaScript实现GriwView单列全选(自写代码)
2013/05/13 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
Node爬取大批量文件的方法示例
2019/06/28 Javascript
js实现图片跟随鼠标移动效果
2019/10/16 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
python网络编程实例简析
2014/09/26 Python
python通过shutil实现快速文件复制的方法
2015/03/14 Python
python实现根据用户输入从电影网站获取影片信息的方法
2015/04/07 Python
Python lxml模块安装教程
2015/06/02 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
python实现视频读取和转化图片
2019/12/10 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
2014学雷锋活动心得体会
2014/03/10 职场文书
冬季作息时间调整通知
2015/04/24 职场文书
2015中学学校工作总结
2015/07/20 职场文书
初中数学教学随笔
2015/08/15 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
医生行业员工的辞职信
2019/06/24 职场文书
Apache Hudi的多版本清理服务彻底讲解
2022/03/31 Servers
Redis基本数据类型String常用操作命令
2022/06/01 Redis