JS - 解决鼠标单击、双击事件冲突问题（原生js实现）

最新推荐文章于 2024-08-23 17:28:19 发布

dilei8887

最新推荐文章于 2024-08-23 17:28:19 发布

阅读量1.3k

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/pengfei25/p/10685436.html

版权

本文介绍了JavaScript中如何解决鼠标单击和双击事件冲突的问题。由于双击事件会触发两次单击事件，导致业务逻辑错误。通过设置定时器，当鼠标在300毫秒内再次点击时，将触发双击事件而非单击事件，从而避免了冲突。

摘要由CSDN通过智能技术生成

由于鼠标双击时每一次触发双击事件都会引起两次单击事件和一次双击事件，原生的js不提供专门的双击事件。

因为业务原因，双击和单机都绑定了不同的业务，在双击的时候又触发了单机，影响了页面的正常显示

出现问题的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
      /*
       * 页面初始化
       */
      function onload() {
        document.addEventListener('click

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

dilei8887

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

移动端的双击事件是否适合使用？--前端开发

ScriptWELL的博客

09-23

335

由于双击事件需要用户在短时间内点击两次，因此用户可能会因为意外的误触而触发双击事件，从而导致意想不到的结果。另外，双击事件的响应时间也需要考虑，如果用户的点击速度过快或过慢，可能无法触发期望的效果。但在移动设备上，由于触摸屏幕的特性，双击事件可能会与其他常见的触摸手势（如单击、滑动）发生冲突，影响用户的交互体验。双击事件在传统的桌面应用中较为常见，但在移动设备上可能并不是用户首选的操作方式。此外，由于移动设备的多样性，不同设备和浏览器对双击事件的处理方式可能有所不同，这也增加了使用双击事件的风险。

JS 鼠标单击，双击，三击，多击

qq_40390503的博客

12-23

1619

我这里有两个方法，一个低级的，一个中级的。（我认为有更好的方法，但是我没有想出来）如果用 <div ondblclick="f2()" onclick="f1()"></div> 那么双击，会先执行两次f1()后,再执行f2(); 而我们双击肯定是只想执行f2();所有我们得想别的方法其实多击好像并没有什么用处。。。一、低级方法思路是这样的：每次点击，count都会+1；只在第一次点击时，开启计时器，在计时结束后count为几就说明在这段时间里点击了几次。注意：单击和双

参与评论您还未登录，请先登录后发表或查看评论

js 模拟鼠标双击

nongcunqq的博客

03-31

2085

var targLink = document.getElementById ("something"); var clickEvent = document.createEvent ('MouseEvents'); clickEvent.initEvent ('dblclick', true, true); targLink.dispatchEvent (clickEvent); 参考 https://stackoverflow.com/questions/23926921/how-do-i-d

js监听鼠标单击和双击事件，冲突问题处理

最新发布

m0_55477902的博客

08-23

753

在浏览器中，单击事件通常会在双击事件之前触发，因此在处理单击和双击事件时，双击操作往往会先触发一次单击事件，这会导致意外的行为。要解决这个问题，可以通过延迟处理单击事件，给浏览器一些时间来判断用户是否会进行双击操作。

js实现鼠标单击或者双击事件

weixin_30267691的博客

01-08

660

// timer为全局变量 getClickEmail1(_type) { clearTimeout(this.timer); if (_type == 1) { if (event.detail == 2) return; this.timer = setTimeout(function() { ...

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

10-22

在使用jQuery进行事件监听时，我们可能会遇到一个常见的问题，即单击事件（click）和双击事件（dblclick）之间的冲突。这种冲突通常发生在想要监听双击事件，但是页面中又存在单击事件的监听器时。由于浏览器事件的...

JS实现鼠标单击与双击事件共存

10-26

为了解决这一问题，本文章提供了一个简单的JavaScript实例代码，通过利用JavaScript的setTimeout函数来实现单击和双击事件的共存。这里主要使用了setTimeout函数来延迟执行单击事件的回调函数，通过设定延迟时间差来...

如何解决手机浏览器页面点击不跳转浏览器双击放大网页

11-22

当在Android设备上，尽管URL已经改变，但页面并未实际跳转，这可能是因为浏览器的双击放大功能干扰了单击事件的处理。为了解决这个问题，我们可以采取以下步骤： 1. **添加Meta视口标签**：在HTML文档的部分添加...

javascript事件列表解说

gx_xiaon的专栏

02-23

970

javascript事件列表解说事件浏览器支持解说一般事件 onclick IE3、N2

捕捉鼠标右键双击

11-27

如果不做特殊处理，Js捕捉不到右键双击事件。而在某些情况下，控制不了网页的鼠标右键双击事件，使得我们的web应用处于失控状态，给浏览者带来不愉快的感受，因此，捕捉并控制鼠标右键的双击事件就很有必要了。本资料提供的代码，可以捕捉鼠标右键的双击事件。

html双击事件 jq,jQ双击事件用原生写的方法.html

weixin_32302013的博客

06-04

469

ondblclick事件htmlOndblclickHandlerhtml元素不加on不会触发事件htmlOndblClickjsOndblClickaddEventListener// JQ点击事件的写法/**$(function(){$("button").dblclick(function(){alert("JQ dblclick 事件");});});**/// 原生js有三种可以触发on...

原生js实现双击、三击甚至更多击事件，默认[1, 10]击

User XXX Blog

09-18

3560

JS中解决单击双击事件的冲突

AstroSadmummy的博客

01-10

2060

当一个元素上即绑定了单击事件又绑定了双击事件，双击元素时会先触发单击事件，没有达到我们理想的效果从而影响了用户体验。解决方法： // 解决同一个元素使用单击双击事件的冲突 // 解决思路：单击事件后延迟一定时间执行函数，如果这段时间内触发了双击事件 // 则清除单击事件，如果这段时间结束了还没第二次点击则认为是单击事件，触发函数 <body> <div>是兄弟就点我！</div> </body> <script> let time

js 实现单击、双击事件