首先,来了解一下点击事件发生的先后顺序:
单击: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实现)的更多相关文章

  1. electron 系统托盘 单击 双击事件冲突解决方法

    部分代码 // 任务栏点击事件 let timeCount = 0 tray.on('click', function (Event) { setTimeout(() => { if (time ...

  2. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  3. js(jquery)鼠标移入移出事件时,出现闪烁、隐藏显示隐藏显示不停切换的情况

    <script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...

  4. JQuery如何实现双击事件时不触发单击事件,解决鼠标单双击冲突问题

    在jQuery的事件绑定中,如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时,不会触发双击事件(dblclick), 执行双击事件(dblcli ...

  5. jquery 单击和双击事件冲突解决方案

    先看一下点击事件的执行顺序: 单击(click):mousedown,mouseout,click: 双击(dblclick):mousedown,mouseout,click , mousedown ...

  6. JQuery解决鼠标单双击冲突问题

    转自链接:https://www.shuzhiduo.com/A/xl560MKrzr/ 在jQuery的事件绑定中,如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单 ...

  7. MVC中使用Echart后台加载数据 实现饼图、折线图、全国地图数据,单击双击事件等

    @{ Layout = null; } @if (false) { <script src="~/Js/jquery-easyui-1.5/jquery.min.js"> ...

  8. JS控制鼠标点击事件

    鼠标点击事件就是当鼠标点击元素时,就会出现另一个窗口,类似于百度首页中右上角的“登录”这个按钮,当鼠标点击 登录时,就会出现登录窗口.大体的意思就是这样,直接上代码了,简单易懂. <!DOCTY ...

  9. JS里关于事件的常被考察的知识点:事件流、事件广播、原生JS实现事件代理

    1.JS里面的事件流 DOM2级事件模型中规定了事件流的三个阶段:捕获阶段.目标阶段.冒泡阶段,低版本IE(IE8及以下版本)不支持捕获阶段 捕获事件流:Netscape提出的事件流,即事件由页面元素 ...

随机推荐

  1. Wamp 设置 www 目录

    打开httpd.conf,搜索wwwroot 和 directory 直接改为新目录即可. 对于wamp3是无效的,可以这样解决: “You need to change these values a ...

  2. 38.输出1到最大的N位数[Print 1 to max number of N bits]

    [题目] 输入数字n,按顺序输出从1最大的n位10进制数.比如输入3,则输出1.2.3一直到最大的3位数即999. [分析] 这是一道很有意思的题目.看起来很简单,其实里面却有不少的玄机. [常规思路 ...

  3. 高效求幂取余 算法,复杂度 log(n)

    做TopCoder SRM 576 D2 L3 题目时,程序有个地方需要对一个数大量求幂并取余,导致程序运行时间很长,看了Editoral之后,发现一个超级高效的求幂并取余的算法,之前做System ...

  4. hql语句拼接的替换方式

    hql语句拼接的替换方式 hql语句拼接 String hql = "FROM Topic t WHERE t.forum=? "; List<Object> para ...

  5. 自定义alert窗口样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. C# 将object对象转换为实体对象

    C# 将object对象转换为实体对象.一共两种方法. 第一种方法,代码如下: /// <summary> /// 将object对象转换为实体对象 /// </summary> ...

  7. hsdf -- 6.21 -- day6

    差点忘写总结…… 这么快就到day6了啊 感觉前面写的总结都是苟屁,跟没有有什么区别…… 今天认真总结一下 最大的失误就是全程肝a题,最后还挂了…… 感觉今天方向偏了,由进行一次测试到仅仅是想要尽可能 ...

  8. 【杂谈】Spring Boot 默认支持的并发量

    Spring Boot应用支持的最大并发量是多少? Spring Boot 能支持的最大并发量主要看其对Tomcat的设置,可以在配置文件中对其进行更改.当在配置文件中敲出max后提示值就是它的默认值 ...

  9. SQL 3

    SQL SELECT DISTINCT 语句 SELECT DISTINCT 语句用于返回唯一不同的值. SQL SELECT DISTINCT 语句 在表中,一个列可能会包含多个重复值,有时您也许希 ...

  10. Selenium2+python自动化49-判断文本(text_to_be_present_in_element)

    前言 在做结果判断的时候,经常想判断某个元素中是否存在指定的文本,如登录后判断页面中是账号是否是该用户的用户名. 在前面的登录案例中,写了一个简单的方法,但不是公用的,在EC模块有个方法是可以专门用来 ...