JS - 解决鼠标单击、双击事件冲突问题（原生js实现）
首先，来了解一下点击事件发生的先后顺序：
单击：mousedown, mouseup, click
双击：mousedown, mouseup, click, mousedown, mouseup, click, dblclick
由于鼠标双击时每一次触发双击事件都会引起两次单击事件和一次双击事件，原生的js不提供专门的双击事件。
因为业务原因，双击和单机都绑定了不同的业务，在双击的时候又触发了单机，影响了页面的正常显示
出现问题的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*
* 页面初始化
*/
function onload() {
document.addEventListener('click', onDocumentClick);
document.addEventListener('dblclick', onDocumenDblClick);
} /*
* 鼠标单击事件响应
* event 鼠标事件对象
*/
function onDocumentClick(event) {
console.log("鼠标单击");
} /*
* 鼠标双击事件响应
* event 鼠标事件对象
*/
function onDocumenDblClick(event) {
console.log("鼠标双击");
}
</script>
</head>
<body onload="onload()">
</body>
</html>
解决办法：
setTimerout
所以双击时为了屏蔽单击事件，引入定时器功能，动态的为每次鼠标单击计时，300ms，300ms内鼠标再次点击会出发双击事件而不走单击事件
解决代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//单击延时触发
var clickTimeId; /*
* 页面初始化
*/
function onload() {
document.addEventListener('click', onDocumentClick);
document.addEventListener('dblclick', onDocumenDblClick);
} /*
* 鼠标单击事件响应
* event 鼠标事件对象
*/
function onDocumentClick(event) {
// 取消上次延时未执行的方法
clearTimeout(clickTimeId);
//执行延时
clickTimeId = setTimeout(function() {
//此处为单击事件要执行的代码
console.log("鼠标单击");
}, 250);
} /*
* 鼠标双击事件响应
* event 鼠标事件对象
*/
function onDocumenDblClick(event) {
// 取消上次延时未执行的方法
clearTimeout(clickTimeId);
console.log("鼠标双击");
}
</script>
</head>
<body onload="onload()">
</body>
</html>
如果还vue 同样的方法，但是注意有可能会有一些版本不支持，1.0版本是可以，2.0的在线的版本有一些不支持native，到官网中在线引入vue（2019年10月15日）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试单击双击</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
#box{
background-color:pink
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
window.onload=function(){
//var clickTimeId;
new Vue({
el:'#box',
data:{
clickTimeId:"",
},
methods:{
onDocumentClick(event) {
// 取消上次延时未执行的方法
clearTimeout(this.clickTimeId);
//执行延时
this.clickTimeId = setTimeout(function() {
//此处为单击事件要执行的代码
console.log("0");
}, 250);
},
onDocumenDblClick(event) {
// 取消上次延时未执行的方法
clearTimeout(this.clickTimeId);
console.log("1");
}
}
});
};
</script>
</head>
<body>
<button id="box" @click="onDocumentClick" @dblclick="onDocumenDblClick">
点我啊
</button>
</body>
</html>
在实际使用过程中还发现了一个有趣的应用，我们知道没有设置定时器的时候，双击的时候是触发两次click的事件，如果设置 定时的时间低于170ms的时候 双击时会触发一次单击的事件 如果有特殊需要也可以控制好定时器的时间
2020年2月15号
在实际组态项目中的时候，因为特殊情况，还是有时间冲突的问题，添加了定时器就导致了页面的其他业务不能正常使用了，所以最后还是放弃了定时器这种做法
最终的解决办法：
在单击的时候记录下鼠标的xy位置，然后双击的结束的时候记录此时鼠标的xy位置，通过两次的xy位置进行对比，如果两次的xy位置相同，或者在一个允许很小的范围，就证明是双击了，其他就当做是单击处理，这样一来的问题就都解决，这种方法推荐，亲测可试
JS - 解决鼠标单击、双击事件冲突问题（原生js实现）的更多相关文章
- electron 系统托盘 单击 双击事件冲突解决方法
部分代码 // 任务栏点击事件 let timeCount = 0 tray.on('click', function (Event) { setTimeout(() => { if (time ...
- JS Event 鼠标拖拽事件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况
<script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...
- JQuery如何实现双击事件时不触发单击事件，解决鼠标单双击冲突问题
在jQuery的事件绑定中,如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时,不会触发双击事件(dblclick), 执行双击事件(dblcli ...
- jquery 单击和双击事件冲突解决方案
先看一下点击事件的执行顺序: 单击(click):mousedown,mouseout,click: 双击(dblclick):mousedown,mouseout,click , mousedown ...
- JQuery解决鼠标单双击冲突问题
转自链接:https://www.shuzhiduo.com/A/xl560MKrzr/ 在jQuery的事件绑定中,如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单 ...
- MVC中使用Echart后台加载数据 实现饼图、折线图、全国地图数据,单击双击事件等
@{ Layout = null; } @if (false) { <script src="~/Js/jquery-easyui-1.5/jquery.min.js"> ...
- JS控制鼠标点击事件
鼠标点击事件就是当鼠标点击元素时,就会出现另一个窗口,类似于百度首页中右上角的“登录”这个按钮,当鼠标点击 登录时,就会出现登录窗口.大体的意思就是这样,直接上代码了,简单易懂. <!DOCTY ...
- JS里关于事件的常被考察的知识点：事件流、事件广播、原生JS实现事件代理
1.JS里面的事件流 DOM2级事件模型中规定了事件流的三个阶段:捕获阶段.目标阶段.冒泡阶段,低版本IE(IE8及以下版本)不支持捕获阶段 捕获事件流:Netscape提出的事件流,即事件由页面元素 ...
随机推荐
- http://localhost:8080/hello?wsdl
<definitions xmlns:wsu="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-u ...
- oracle创建新的用户 创建序列 并生成自动自增
1.用有dba权限的用户登录:sys用户 system 口令:manager 2.创建一个新用户:create user abc identified by 123456; 3.授予DBA权限: gr ...
- Hdu2612 Find a way 2017-01-18 14:52 59人阅读 评论(0) 收藏
Find a way Time Limit : 3000/1000ms (Java/Other) Memory Limit : 32768/32768K (Java/Other) Total Su ...
- MSVC vs. MinGW 之dll玩转攻略手记【转
一份粗糙的研究记录,有待补完和整理. MinGW:c -> o gcc -c a.cc -> exe gcc a.c libs.o -o a.exe ( ...
- [smarty] 在smarty模板中使用smarty变量初始化 javascript 变量的问题
// 总结:// 1/ 在smarty 模板文件中,使用从php中assign过来的smarty变量,一定需要使用双引号或单引号来括住smarty变量,如:var title="<!- ...
- Python学习-18.Python中的错误处理（三）
在某些情况下,我们需要定义自己的异常并且抛出 先定义一个错误: class MyError(BaseException): def __init__(self): pass 上面定义了一个叫MyErr ...
- Ubuntu/Debian下通过Apt-get简单安装Oracle JDK
近几年本人对各种Arm小板,开发板不明原因中毒,基本以Linux系统为主,本篇文章以记录在32位Arm的Debian8上,通过Apt-get的简单命令安装Oracle JDK8并成功的记录. 1.首先 ...
- ActiveMq 配置多队列
一直在赶项目,好久没有写博文了,中间偶尔有些代码什么的,也都是放到github了,不过大多都是测试代码,毕竟有些成型的东西是给公司写的,鉴于职业道德,还是不好公开. 言归正传,这两天在接入第三方的收费 ...
- Feed back TFS 2017 RC upgrade status to product team in product group 2017.03.01
作为微软的MVP,有一个我最喜欢的好处,就是可以与产品组(产品研发部门)有零距离接触,可以最先拿到即将发版的产品,并且和产品组沟通,对产品中出现的问题实时反馈. 看到TFS产品组吸收了自己的建议和反馈 ...
- python 查找字符串同时包含数字和字母的最长子字符串的几种实现方法
有个字符串$sd1#111$svda123!!!221&eSSDSDG,包含特殊字符.数字和字母,输出最长的子字符串和他的长度 例如上面的字符串同时包含数字和字母的字符串是svda123,长度 ...