Implémentation de l'événement de clic de souris JS

Cet article présente principalement les idées d'implémentation et d'extension de l'événement JS mouse 3-click. Les amis qui en ont besoin peuvent s'y référer

Ces derniers jours, j'ai lu le contenu lié aux événements Dom dans. Programmation avancée JavaScript. En même temps, j'ai 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 créé quelques petites extensions et implémentations pour les événements de clic afin d'améliorer notre 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.

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 : déclenché lorsqu'un bouton de la souris est activé. enfoncé

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

clic : cliquez

mousedown

mouseup

dblclick : double-clic

Évidemment, le clic dépend. Pour dblclick, vous pouvez envisager d'implémenter trois clics de souris consécutifs pour déclencher l'exécution en fonction de ces deux événements. Conception pour surveiller l'événement de clic après le déclenchement de dblclick si l'événement de clic est déclenché dans un court laps de temps. du temps, cela constituera l'effet de trois clics de souris consécutifs. L'implémentation spécifique est la suivante Code source :

<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. L'implémentation de l'événement -click

est associée à l'événement 3 clics de la souris If Comment implémenter le déclenchement d'un événement combo de souris à n fois. 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>

Cet article se termine. Vous pouvez choisir le code que vous souhaitez. à utiliser selon vos besoins.

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!