마우스 클릭 이벤트 3회 바인딩

php中世界最好的语言원래의: 2018-04-17 11:47:371790검색

이번에는 마우스 3클릭 이벤트 바인딩에 대한 주의 사항을 가져오겠습니다. 실제 사례를 살펴보겠습니다.

지난 며칠 동안 JavaScriptAdvanced Programme에서 Dom 이벤트에 대해 읽었습니다. 또한 인터넷에서 여러 마우스 클릭 이벤트에 대해 읽었습니다. 마우스 이벤트는 간단하고 일반적으로 사용되는 이벤트 중 하나입니다. Dom 이벤트에 대한 이해를 높이기 위해 클릭 이벤트에 대한 작업을 수행합니다. 구현 및 아이디어는 제가 직접 정리한 것입니다. 잘못된 부분이 있으면 전문가에게 공유해 주시고 수정해 주시기 바랍니다.

1. 일반 이벤트 처리 모듈을 만듭니다(네이티브 구현)

다음 구현은 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. 마우스 3클릭 이벤트 구현

마우스 클릭 이벤트 및 실행 트리거 시퀀스와 관련된 이벤트:

mousedown: 마우스 버튼을 누를 때 트리거됩니다

mouseup: 마우스 버튼을 놓을 때 트리거됩니다

클릭: 클릭

마우스다운

마우스업

dblclick: 더블클릭

분명히 클릭은 dblclick에 따라 달라집니다. 세 번의 연속 마우스 클릭으로 실행을 트리거하는 데 이 두 이벤트를 사용하는 것을 고려할 수 있습니다. 디자인은 dblclick을 트리거하고 클릭 이벤트를 수신합니다. 연속적인 마우스 클릭 효과는 다음 소스 코드에서 구현됩니다:

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

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. 마우스 n-클릭 이벤트 구현

마우스의 3번 클릭 이벤트에서 n번의 연속 마우스 클릭에 대한 이벤트 트리거를 구현하는 방법입니다. 떠오르는 아이디어는 대상 개체의 dblclick 이벤트를 비활성화하고 논리적 판단 및 연속 클릭 작업에만 클릭 이벤트를 사용하는 것입니다. 짧은 시간 내에 n 번의 클릭이 충족되면 실행이 시작되고, 그렇지 않으면 실행됩니다. 누적 개수가 다시 계산됩니다. 구체적인 구현 코드는 다음과 같습니다:

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

마지막으로 jquery 버전의 코드를 공유하겠습니다

<!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>

이 기사의 사례를 읽으신 후 방법을 마스터하셨으리라 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!