JS 마우스 클릭 이벤트 구현-JS 튜토리얼-php.cn

JS 마우스 클릭 이벤트 구현

巴扎黑

풀어 주다： 2018-05-15 17:01:55

원래의

5389명이 탐색했습니다.

이 글은 주로 JS 마우스 3클릭 이벤트의 구현 및 확장 아이디어를 소개합니다. 필요하신 분들은 참고하시면 됩니다

지난 며칠간 JavaScript 고급 프로그래밍에서 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(&#39;on&#39; + type, handler);// DOM2级IE事件
      } else {
        element[&#39;on&#39; + type] = handler;// DOM0级事件
      }
    },
    // 移除事件监听
    removeHandler: function (element, type, handler) {
      if (element.removeEventListener) {
        element.removeEventListener(type, handler, false);
      } else if (element.detachEvent) {
        element.detachEvent(&#39;on&#39; + type, handler);
      } else {
        element[&#39;on&#39; + 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: 마우스 버튼을 놓을 때 트리거됨

click: 클릭

mousedown

mouseup

dblclick: 더블 클릭

클릭은 dblclick에 따라 달라지므로 이 두 이벤트를 기반으로 실행을 트리거하기 위해 세 번의 연속 마우스 클릭 구현을 고려할 수 있습니다. 디자인은 dblclick을 트리거하고 클릭 이벤트를 모니터링합니다. 세 번의 연속 마우스 클릭의 효과를 구성합니다.

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

로그인 후 복사

js code

require([&#39;eventUtil&#39;], function (EventUtil) {
  var button = document.getElementById(&#39;button&#39;);

  click3Event(button, function (event) {
    console.log(&#39;3 click&#39;);
  });

  // 鼠标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, &#39;click&#39;, handler);

        // 执行内容
        fn();
      };

      EventUtil.addHandler(target, &#39;click&#39;, handler);

      // 为防止双击后较长时间再次单击执行事件
      setTimeout(function () {
        EventUtil.removeHandler(target, &#39;click&#39;, handler);
      }, 300);
    };

    EventUtil.addHandler(dom, &#39;dblclick&#39;, handler);
  }

로그인 후 복사

3. 마우스 n-클릭 이벤트 구현

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

require([&#39;eventUtil&#39;], function (EventUtil) {
  var button = document.getElementById(&#39;button&#39;);

  nclickEvent(4, button, function (event, n) {
    console.log(n + &#39; click&#39;);
  });


  function nclickEvent (n, dom, fn) {
    // 禁止双击事件
    EventUtil.removeHandler(dom, &#39;dblclick&#39;, 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);
  }
});

로그인 후 복사

마지막으로 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;
		$(&#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>

로그인 후 복사

이 글은 필요에 따라 사용하려는 코드를 선택하면 됩니다.

위 내용은 JS 마우스 클릭 이벤트 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!