Code d'implémentation de l'événement JS mouse 3 click

Ces derniers jours, j'ai lu des articles sur les événements Dom dans la programmation avancée JavaScript. J'ai également vu plusieurs événements de clic de souris sur Internet. Les événements de souris sont l'un des événements simples et couramment utilisés, j'ai donc fait quelques petits événements. travailler sur les événements de clic Extension et implémentation pour améliorer la compréhension des événements Dom. La mise en œuvre et les idées sont résumées par moi-même. S'il y a quelque chose qui ne va pas, veuillez demander aux experts de partager et de me corriger. Cet article présente principalement les idées d'implémentation et d'expansion des événements JS mouse 3 click. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

1. Créer un module général de traitement des événements (implémentation native)

L'implémentation suivante est basée sur la méthode de définition du module AMD :

/**
 * 浏览器兼容事件处理组件
 */
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. Implémentation de l'événement 3 clics de souris

Les événements impliqués dans l'événement de clic de souris et la séquence de déclenchement d'exécution :

mousedown : n'importe quel bouton de la souris est enfoncé Déclenché lorsque

mouseup : Déclenché lorsque le bouton de la souris est relâché

clic : cliqué

mousedown

mouseup

dblclick : Double-clic

Évidemment, le clic dépend de dblclick. Vous pouvez envisager d'utiliser ces deux événements pour déclencher l'exécution par trois clics de souris consécutifs. La conception déclenche dblclick pour surveiller l'événement de clic. L'événement est déclenché dans un court laps de temps, il constitue un clic de souris continu. L'effet de cliquer 3 fois est implémenté comme suit :

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

code js<🎜. >

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. Implémentation de l'événement n-clic de la souris

Associé à l'événement 3-clic de la souris, comment implémenter n -déclenchement d'un événement combo de souris en temps réel. L'idée qui me vient à l'esprit est la suivante : désactivez l'événement dblclick de l'objet cible et utilisez uniquement l'événement click pour le jugement logique et l'opération de clics continus. Si n clics sont obtenus dans un court laps de temps, l'exécution sera déclenchée, sinon. le nombre cumulé sera recalculé. Le code spécifique d'implémentation est le suivant :

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

Enfin, je partagerai avec vous une version jquery du 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>

Recommandations associées :

Événement de clic droit sur l'élément personnalisé jQuery

À propos de l'événement de clic de liaison de collection Li d'indice d'indice js exemple de partage

L'événement click est déclenché par défaut lorsque jQuery est exécuté pour la première fois sur la page

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!