In the past few days, I have been reading about Dom events in JavaScript advanced programming, and I also saw about multiple mouse click events on the Internet. Mouse events are one of the simple and commonly used events, so I did some small work on click events. Extension and implementation to enhance further understanding of Dom events. The implementation and ideas are summarized by myself. If there is anything wrong, please ask the experts to share and correct me. This article mainly introduces the implementation and expansion ideas of JS mouse 3 click events. Friends who need it can refer to it. I hope it can help everyone.
1. Make a general event processing module (native implementation)
The following implementation is based on the AMD module definition method:
/** * 浏览器兼容事件处理组件 */ 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. Implementation of mouse 3-click event
The events involved in the mouse click event and the execution trigger sequence:
mousedown: Triggered when any mouse button is pressed
mouseup: Triggered when the mouse button is released
click: click
mousedown
mouseup
dblclick: double click
Obviously, click depends on dblclick. You can consider triggering execution based on these two events by 3 consecutive mouse clicks. The design triggers dblclick and listens to the click event. If the click event is triggered in a short period of time, it constitutes 3 consecutive mouse clicks. The effect is achieved by the following source code:
<p> <button id="button">鼠标3击</button> </p>
js code
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. Mouse n Click event implementation
Associated from the 3-click event of the mouse, how to implement the event triggering of n consecutive mouse clicks. The idea that comes to mind is: disable the dblclick event of the target object, and only use the click event for logical judgment and operation of continuous clicks. If n clicks are met within a short period of time, execution will be triggered, otherwise the cumulative number will be recalculated. The specific implementation code is as follows:
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); } });
Finally, I will share with you a jquery version of the 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>
Related recommendations:
jQuery custom element right-click event
About js index subscript li collection binding click event instance sharing
jQuery triggers a click event by default when running the page for the first time
The above is the detailed content of Implementation code of JS mouse 3 click event. For more information, please follow other related articles on the PHP Chinese website!

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function

DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

Atom editor mac version download
The most popular open source editor
