Bind mouse click event 3 times-JS Tutorial-php.cn

Bind mouse click event 3 times

php中世界最好的语言

Release： 2018-04-17 11:47:37

Original

1748 people have browsed it

This time I will bring you the binding of 3 mouse click events. What are the precautions for binding the mouse 3 click events. The following is a practical case, let’s take a look.

In the past few days, I have been reading about Dom events in JavaScript Advanced Programming. I also saw about multiple mouse click events on the Internet. Mouse events are one of the simple and commonly used events. , so we made some small extensions and implementations for click events to enhance our further understanding of Dom events. The implementation and ideas are summarized by myself. If there is anything wrong, please ask the experts to share and correct me.

1. Make a general event processing module (native implementation)

The following implementation is based on the way AMD defines modules:

/**
 * 浏览器兼容事件处理组件
 */
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;
});

Copy after login

2. Mouse 3-click event implementation

Events involved in mouse click events and execution triggering sequence:

mousedown: Triggered when any mouse button is pressed

mouseup: triggered when the mouse button is released

click: click

mousedown

mouseup

dblclick: double-click

Obviously, click depends on dblclick. You can consider using these two events to trigger execution by three consecutive mouse clicks. Design to monitor the click event after triggering dblclick. If the click event is triggered in a short period of time, it will constitute three consecutive mouse clicks. The effect is implemented in the following source code:

<p> 
  <button id="button">鼠标3击</button> 
</p>

Copy after login

js code

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);
  }

Copy after login

3. Mouse n-click event implementation

From the 3-click event of the mouse, how to implement the event triggering of n consecutive mouse clicks. The idea that comes to mind is: disable the dblclick event of the target object, and only use the click event for logical judgment and operation of continuous clicks. If n clicks are met within a short period of time, execution will be triggered, otherwise the cumulative number will be recalculated. The specific implementation code is as follows:

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);
  }
});

Copy after login

Finally, I will share with you a jquery version of the code

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<p id="box">234234234234234</p>
	<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>

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!