Bind mouse click event 3 times
This time I will bring you the binding of 3 mouse click events. What are the precautions for binding the mouse 3 click events. The following is a practical case, let’s take a look.
In the past few days, I have been reading about Dom events in JavaScript Advanced Programming. I also saw about multiple mouse click events on the Internet. Mouse events are one of the simple and commonly used events. , so we made some small extensions and implementations for click events to enhance our 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.
1. Make a general event processing module (native implementation)
The following implementation is based on the way AMD defines 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;
});2. Mouse 3-click event implementation
Events involved in mouse click events and execution triggering 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 using these two events to trigger execution by three consecutive mouse clicks. Design to monitor the click event after triggering dblclick. If the click event is triggered in a short period of time, it will constitute three consecutive mouse clicks. The effect is implemented in 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
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>I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
Recommended reading:
The above is the detailed content of Bind mouse click event 3 times. For more information, please follow other related articles on the PHP Chinese website!
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
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to disable taskbar thumbnail preview in Win11? Turn off the taskbar icon display thumbnail technique by moving the mouse
Feb 29, 2024 pm 03:20 PM
This article will introduce how to turn off the thumbnail function displayed when the mouse moves the taskbar icon in Win11 system. This feature is turned on by default and displays a thumbnail of the application's current window when the user hovers the mouse pointer over an application icon on the taskbar. However, some users may find this feature less useful or disruptive to their experience and want to turn it off. Taskbar thumbnails can be fun, but they can also be distracting or annoying. Considering how often you hover over this area, you may have inadvertently closed important windows a few times. Another drawback is that it uses more system resources, so if you've been looking for a way to be more resource efficient, we'll show you how to disable it. but
Razer | Pokémon Gengar wireless mouse and mouse pad are now available, with a set price of 1,549 yuan
Jul 19, 2024 am 04:17 AM
According to news from this site on July 12, Razer today announced the launch of the Razer|Pokémon Gengar wireless mouse and mouse pad. The single product prices are 1,299 yuan and 299 yuan respectively, and the package price including the two products is 1,549 yuan. This is not the first time that Razer has launched Gengar co-branded peripheral products. In 2023, Razer launched the Gengar-style Yamata Orochi V2 gaming mouse. The two new products launched this time all use a dark purple background similar to the appearance of the Ghost, Ghost, and Gengar families. They are printed with the outlines of these three Pokémon and Poké Balls, with the character Gengar in the middle. A large, colorful image of a classic ghost-type Pokémon. This site found that the Razer|Pokémon Gengar wireless mouse is based on the previously released Viper V3 Professional Edition. Its overall weight is 55g and equipped with Razer’s second-generation FOC
HP launches Professor 1 three-mode soft mouse: 4000DPI, Blue Shadow RAW3220, initial price 99 yuan
Apr 01, 2024 am 09:11 AM
According to news from this website on March 31, HP recently launched a Professor1 three-mode Bluetooth mouse on JD.com, available in black and white milk tea colors, with an initial price of 99 yuan, and a deposit of 10 yuan is required. According to reports, this mouse weighs 106 grams, adopts ergonomic design, measures 127.02x79.59x51.15mm, has seven optional 4000DPI levels, is equipped with a Blue Shadow RAW3220 sensor, and uses a 650 mAh battery. It is said that it can be used on a single charge. 2 months. The mouse parameter information attached to this site is as follows:
Microsoft Word cannot select or highlight text using mouse
Feb 20, 2024 am 09:54 AM
This article explores issues that can arise when the mouse is unable to select or highlight text in Microsoft Word, and how to resolve them. Why can't I select text in Microsoft Word? The inability to select text in MSWord may be affected by a variety of reasons, such as permission restrictions, document protection, mouse driver issues, or file corruption. Solutions to these problems are provided below. Fix Microsoft Word cannot select or highlight text using mouse If Microsoft Word cannot select or highlight text using mouse, follow the solutions mentioned below: Make sure your left mouse button is working Check if you are eligible to change the file Update the driver of your mouse
VGN co-branded 'Elden's Circle' keyboard and mouse series products are now on the shelves: Lani / Faded One custom theme, starting from 99 yuan
Aug 12, 2024 pm 10:45 PM
According to news from this site on August 12, VGN launched the co-branded "Elden Ring" keyboard and mouse series on August 6, including keyboards, mice and mouse pads, designed with a customized theme of Lani/Faded One. The current series of products It has been put on JD.com, priced from 99 yuan. The co-branded new product information attached to this site is as follows: VGN丨Elden Law Ring S99PRO Keyboard This keyboard uses a pure aluminum alloy shell, supplemented by a five-layer silencer structure, uses a GASKET leaf spring structure, has a single-key slotted PCB, and the original height PBT material Keycaps, aluminum alloy personalized backplane; supports three-mode connection and SMARTSPEEDX low-latency technology; connected to VHUB, it can manage multiple devices in one stop, starting at 549 yuan. VGN丨Elden French Ring F1PROMAX wireless mouse the mouse
In which folder is the Razer mouse driver located?
Mar 02, 2024 pm 01:28 PM
Many users don't know where the files installed by their Razer drivers go. These driver files are usually installed on the system disk, which is the C drive of the computer. The specific location is in the RAZE folder under programfiles. In which folder is the Razer mouse driver located? A: In the RAZE folder under programfiles on the system C drive. Generally, the driver will be installed on the C drive, just find it according to the location. Introduction to Razer mouse driver installation method 1. After downloading the file from the official website, double-click to run the downloaded EXE file. 2. Wait for the software to load. 3. Here you can choose which driver you want to install. 4. After selecting, click "Install" in the lower right corner.
What does mouse cpi mean?
Feb 12, 2024 pm 09:40 PM
CPI is also called countperinch. The CPI in the mouse is the sensitivity of the mouse. When using it, the higher the CPI number, the more sensitive the mouse is. Now in this article, the editor brings you an introduction to the function of the mouse CPI button. What does cpi mean? The meaning of x and y axis. The left button becomes the right button. The scroll wheel fails up and down. How to adjust the mouse and restore the mouse? What does cpi mean? Answer: The number of coordinate points fed back per inch during dynamic movement is the sensitivity of the mouse. Button function introduction: 1. Adjust the mouse movement speed button; 2. Adjust the mouse sensitivity by pressing the cpi key; 3. Dynamic indicators to measure mouse sensitivity; 4. The CPI can be freely adjusted between 500/1000CPI;
Colorful launches M900 Pro wireless gaming mouse: right-hand ergonomic shape, 8K Nano receiver, starting from 199 yuan
Mar 23, 2024 pm 05:16 PM
According to news from this website on March 22, Delux launched the M900Pro wireless gaming mouse with a right-handed ergonomic shape. The first pre-sale price starts at 199 yuan. Colorful M900Pro is designed with right-handed ergonomics and is built for users with medium to large hands. It weighs 63g and is sprayed with a matte UV coating. The mouse uses the PAW3395 sensor, the original Nano receiver supports 8000Hz wireless rate of return, is equipped with Huannuo blue shell pink dot micro-movement and comes standard with an RGB charging base and anti-slip stickers. In addition, the mouse also supports functions such as LOD adjustment, full-key customization, custom ripple control, and straight line correction. It is equipped with PTFE foot pads, 1.6m paracord cord, and a built-in receiver storage compartment. This site summarizes the specific parameters of this mouse as follows: Color: black, white, red
