Implementation code of JS mouse 3 click event

In the past few days, I have been reading about Dom events in JavaScript advanced programming, and I also saw about multiple mouse click events on the Internet. Mouse events are one of the simple and commonly used events, so I did some small work on click events. Extension and implementation to enhance 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. This article mainly introduces the implementation and expansion ideas of JS mouse 3 click events. Friends who need it can refer to it. I hope it can help everyone.

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

The following implementation is based on the AMD module definition method:

/**
 * 浏览器兼容事件处理组件
 */
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. Implementation of mouse 3-click event

The events involved in the mouse click event and the execution trigger 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 triggering execution based on these two events by 3 consecutive mouse clicks. The design triggers dblclick and listens to the click event. If the click event is triggered in a short period of time, it constitutes 3 consecutive mouse clicks. The effect is achieved by the following source code:

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

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

3. Mouse n Click event implementation

Associated 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, &#39;click&#39;, handler);
  }
});

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;
		$(&#39;#box&#39;).click(function(){
			if(d){clearTimeout(d)}
			d=setTimeout(function(){
				num=0
			},200);
			num++;
			if(num>=3){
				alert(num+"\n ok")
			}
		})
	})();
	</script>
</body>
</html>

Related recommendations:

jQuery custom element right-click event

About js index subscript li collection binding click event instance sharing

jQuery triggers a click event by default when running the page for the first time

The above is the detailed content of Implementation code of JS mouse 3 click event. For more information, please follow other related articles on the PHP Chinese website!