Implementierungscode des JS-Maus-3-Klick-Ereignisses

In den letzten Tagen habe ich über Dom-Ereignisse in der erweiterten JavaScript-Programmierung gelesen und im Internet gesehen, dass Mausereignisse zu den einfachen und häufig verwendeten Ereignissen gehören Arbeiten Sie an der Erweiterung und Implementierung von Klickereignissen, um das 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. In diesem Artikel werden hauptsächlich die Implementierungs- und Erweiterungsideen von JS-Maus-3-Klick-Ereignissen vorgestellt. Freunde, die es benötigen, können darauf verweisen.

1. Erstellen Sie ein allgemeines Ereignisverarbeitungsmodul (native Implementierung)

Die folgende Implementierung basiert auf der AMD-Moduldefinitionsmethode:

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

Die am Mausklick-Ereignis beteiligten Ereignisse und die Ausführungsauslösesequenz:

Mousedown: Eine beliebige Maustaste wird gedrückt. Ausgelöst, wenn

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

Klick: Geklickt

Mousedown

Mouseup

dblclick: Doppelklick

Klick hängt natürlich von dblclick ab. Sie können die Verwendung dieser beiden Ereignisse in Betracht ziehen, um die Ausführung durch drei aufeinanderfolgende Mausklicks auszulösen Wenn das Klickereignis innerhalb einer kurzen Zeitspanne ausgelöst wird, stellt es einen kontinuierlichen Mausklick dar. Der Effekt des dreimaligen Klickens wird wie folgt umgesetzt:

<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 N-Klick-Ereignisses der Maus

Verknüpft mit dem 3-Klick-Mausereignis, wie um die n-malige Auslösung von Mauskombinationsereignissen zu implementieren. 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 erreicht werden, wird andernfalls 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, &#39;click&#39;, 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;
		$(&#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>

Verwandte Empfehlungen:

Rechtsklick-Ereignis für benutzerdefinierte jQuery-Elemente

Informationen zum Bindungs-Klickereignis für js Index Subscript Li Collection Beispielfreigabe

Das Klickereignis wird standardmäßig ausgelöst, wenn jQuery zum ersten Mal auf der Seite ausgeführt wird

Das obige ist der detaillierte Inhalt vonImplementierungscode des JS-Maus-3-Klick-Ereignisses. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!