Binden Sie das Mausklick-Ereignis dreimal

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für die Bindung von 3 Mausklickereignissen vorstellen.

In den letzten Tagen habe ich über Dom-Ereignisse in JavaScript gelesen. Außerdem habe ich im Internet über mehrere Mausklick-Ereignisse gelesen Daher haben wir einige kleine Erweiterungen und Implementierungen für Klickereignisse vorgenommen, um unser Verständnis von Dom-Ereignissen zu verbessern. Die Umsetzung und Ideen werden von mir selbst zusammengefasst. Wenn etwas nicht stimmt, bitten Sie die Experten, es mir mitzuteilen und zu korrigieren.

1. Erstellen Sie ein allgemeines Ereignisverarbeitungsmodul (native Implementierung)

Die folgende Implementierung basiert auf der Art und Weise, wie AMD Module definiert:

/**
 * 浏览器兼容事件处理组件
 */
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. Implementierung des Maus-3-Klick-Ereignisses

Ereignisse, die an Mausklickereignissen und Ausführungsauslösesequenz beteiligt sind:

Mousedown: Wird ausgelöst, wenn eine beliebige Maustaste gedrückt wird

Mouseup: wird ausgelöst, wenn die Maustaste losgelassen wird

Klicken: Klicken Sie auf

Mousedown

Mausup

dblclick: Doppelklick

Offensichtlich hängt der Klick von dblclick ab. Sie können diese beiden Ereignisse verwenden, um die Ausführung durch drei aufeinanderfolgende Mausklicks auszulösen. Das Design löst dblclick aus und lauscht auf das Klickereignis, das in einem kurzen Zeitraum ausgelöst wird Der Effekt ist im folgenden Quellcode konkret implementiert:

<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. Implementierung des Maus-N-Klick-Ereignisses

Ausgehend vom 3-Klick-Ereignis der Maus erfahren Sie, wie Sie das Ereignis implementieren, das n aufeinanderfolgende Mausklicks auslöst. Die Idee, die mir in den Sinn kommt, ist: Deaktivieren Sie das dblclick-Ereignis des Zielobjekts und verwenden Sie das Klickereignis nur zur logischen Beurteilung und Ausführung kontinuierlicher Klicks. Wenn innerhalb eines kurzen Zeitraums n Klicks erfolgen, wird die Ausführung ausgelöst die kumulierte Zahl wird neu berechnet. Der spezifische Implementierungscode lautet wie folgt:

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

Abschließend werde ich Ihnen eine JQuery-Version des Codes mitteilen

<!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>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln die chinesische PHP-Website!

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonBinden Sie das Mausklick-Ereignis dreimal. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!