Lier l'événement de clic de souris 3 fois-js tutoriel-php.cn

Lier l'événement de clic de souris 3 fois

php中世界最好的语言

Libérer： 2018-04-17 11:47:37

original

1769 Les gens l'ont consulté

Cette fois, je vais vous présenter la liaison de 3 événements de clic de souris. Quelles sont les précautions pour lier 3 événements de clic de souris. Voici un cas pratique, jetons un coup d'oeil.

Ces derniers jours, j'ai lu des articles sur les événements Dom dans JavaScript Programmation avancée. J'ai également vu que les événements de clic de souris multiples sur Internet sont parmi les plus simples et les plus simples. événements couramment utilisés, nous avons 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 façon dont AMD définit les modules :

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

Copier après la connexion

2. Implémentation de l'événement 3 clics de souris

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

mousedown : déclenché lorsqu'un bouton de la souris est enfoncé

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

cliquez : cliquez

souris en bas

souris

dblclick : Double-cliquez

Évidemment, click 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 et écoute l'événement click dans un court laps de temps, il en constitue trois. clics de souris consécutifs. L'effet est implémenté dans le code source suivant :

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

Copier après la connexion

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

Copier après la connexion

3. Implémentation de l'événement mouse n-click

A partir de l'événement 3 clics de la souris, comment implémenter le déclenchement événementiel de n clics de souris consécutifs. 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 d'implémentation spécifique 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, 'click', handler);
  }
});

Copier après la connexion

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;
		$('#box').click(function(){
			if(d){clearTimeout(d)}
			d=setTimeout(function(){
				num=0
			},200);
			num++;
			if(num>=3){
				alert(num+"\n ok")
			}
		})
	})();
	</script>
</body>
</html>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur. le site PHP chinois !

Lecture recommandée :

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!