Implementierung eines JS-Mausklickereignisses

Dieser Artikel stellt hauptsächlich die Implementierungs- und Erweiterungsideen des JS-Maus-3-Klick-Ereignisses vor. Freunde, die es benötigen, können darauf verweisen

In den letzten Tagen habe ich den Inhalt zu Dom-Ereignissen gelesen Gleichzeitig habe ich mehrere Mausklickereignisse im Internet gesehen. Mausereignisse gehören zu den einfachen und häufig verwendeten Ereignissen. Daher habe ich 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 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: Wird ausgelöst, wenn eine beliebige Maustaste gedrückt wird

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

Klick: Klicken

Mousedown

Mouseup

dblclick: Doppelklick

Natürlich ist der Klick abhängig. Für dblclick können Sie erwägen, drei aufeinanderfolgende Mausklicks zu implementieren, um die Ausführung basierend auf diesen beiden Ereignissen auszulösen. Entwerfen Sie, um das Klickereignis nach dem Auslösen von dblclick zu überwachen Dies stellt den Effekt von drei aufeinanderfolgenden Mausklicks dar. Die spezifische Implementierung ist wie folgt:

<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. Die Implementierung des Klickereignisses

ist mit dem Maus-3-Klick-Ereignis verknüpft. So implementieren Sie die Auslösung eines n-maligen Mauskombinationsereignisses. 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 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>

Dieser Artikel endet. Sie können den gewünschten Code auswählen nach Ihren Bedürfnissen zu verwenden.

Das obige ist der detaillierte Inhalt vonImplementierung eines JS-Mausklickereignisses. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!