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 相关文章推荐
学习YUI.Ext 第七天--关于View&amp;JSONView
Mar 10 Javascript
js弹窗代码 可以指定弹出间隔
Jul 03 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 Javascript
js如何取消事件冒泡
Sep 23 Javascript
Egret引擎开发指南之运行项目
Sep 03 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
jQuery事件委托之Safari
Jul 05 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
JS简单实现表格排序功能示例
Dec 20 Javascript
JavaScript生成图形验证码
Aug 24 Javascript
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 Javascript
React之PureComponent的使用作用
Jul 10 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根据IP判断地区名信息的示例代码
2014/03/03 PHP
php 解压rar文件及zip文件的方法
2014/05/05 PHP
php获取本周开始日期和结束日期的方法
2015/03/09 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
使用jQuery处理AJAX请求的基础学习教程
2016/05/10 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
使用cookie绕过验证码登录的实现代码
2017/10/12 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
用python删除java文件头上版权信息的方法
2014/07/31 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
python 读取.nii格式图像实例
2020/07/01 Python
利用Python的folium包绘制城市道路图的实现示例
2020/08/24 Python
Python学习之time模块的基本使用
2021/01/17 Python
CSS3实现可翻转的hover效果
2018/05/23 HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
小蚁科技官方商店:YI Technology
2019/08/23 全球购物
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
技能比赛获奖感言
2014/02/14 职场文书
小学学校门卫岗位职责
2014/08/03 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
财务出纳岗位职责
2015/03/31 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
高中16字霸气押韵班级口号集锦!
2019/06/27 职场文书
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python
JavaScript的Set数据结构详解
2022/02/18 Javascript
Python Pandas 删除列操作
2022/03/16 Python