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

最新推荐文章于 2024-08-23 17:28:19 发布
最新推荐文章于 2024-08-23 17:28:19 发布
阅读量1.3k 收藏 3
点赞数
文章标签： 前端 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元/天 解锁文章
dilei8887
关注
JS 鼠标单击，双击，三击，多击
qq_40390503的博客
12-23 1597
我这里有两个方法，一个低级的，一个中级的。 （我认为有更好的方法，但是我没有想出来） 如果用 <div ondblclick="f2()" onclick="f1()"></div> 那么双击，会先执行两次f1()后,再执行f2(); 而我们双击肯定是只想执行f2();所有我们得想别的方法 其实多击好像并没有什么用处。。。 一、低级方法 思路是这样的：每次点击，count都会+1；只在第一次点击时，开启计时器，在计时结束后count为几就说明在这段时间里点击了几次。 注意：单击和双
js 模拟鼠标双击
nongcunqq的博客
03-31 2050
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中双击事件会触发两次单击事件的问题
u010640592的博客
06-28 1225
以上代码看似可以解决这个问题，但实际上当双击间隔>300ms&&<500ms时，还是额外会触发一次单击事件。如果将上述代码中的300改为500，那么单击事件的延迟过高（想要触发单击事件，要等到点击后500ms才会执行，用户体验太差了）。通过以上代码，就可以定义在规定计时器时间内（200ms）单击次数，如果只有一次那就是单击事件，超过1次就按照双击事件处理。"触发了双击击事件,e=""触发了双击击事件,e=""触发了双击击事件,e=""触发了单击事件,e=""触发了单击事件,e=""触发了单击事件,e="
js实现鼠标单击或者双击事件
weixin_30267691的博客
01-08 648
// timer为全局变量 getClickEmail1(_type) { clearTimeout(this.timer); if (_type == 1) { if (event.detail == 2) return; this.timer = setTimeout(function() { ...
javascript事件列表解说
gx_xiaon的专栏
02-23 954
javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3、N2
jquery单击事件和双击事件冲突解决方案
10-22
在使用jQuery进行事件监听时，我们可能会遇到一个常见的问题，即单击事件（click）和双击事件（dblclick）之间的冲突。这种冲突通常发生在想要监听双击事件，但是页面中又存在单击事件的监听器时。由于浏览器事件的...
JS实现鼠标单击与双击事件共存
10-26
为了解决这一问题，本文章提供了一个简单的JavaScript实例代码，通过利用JavaScript的setTimeout函数来实现单击和双击事件的共存。这里主要使用了setTimeout函数来延迟执行单击事件的回调函数，通过设定延迟时间差来...
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
11-22
当在Android设备上，尽管URL已经改变，但页面并未实际跳转，这可能是因为浏览器的双击放大功能干扰了单击事件的处理。为了解决这个问题，我们可以采取以下步骤： 1. **添加Meta视口标签**： 在HTML文档的部分添加...
捕捉鼠标右键双击
11-27
如果不做特殊处理，Js捕捉不到右键双击事件。而在某些情况下，控制不了网页的鼠标右键双击事件，使得我们的web应用处于失控状态，给浏览者带来不愉快的感受，因此，捕捉并控制鼠标右键的双击事件就很有必要了。 本资料提供的代码，可以捕捉鼠标右键的双击事件。
html双击事件 jq,jQ双击事件用原生写的方法.html
weixin_32302013的博客
06-04 446
ondblclick事件htmlOndblclickHandlerhtml元素不加on不会触发事件htmlOndblClickjsOndblClickaddEventListener// JQ点击事件的写法/**$(function(){$("button").dblclick(function(){alert("JQ dblclick 事件");});});**/// 原生js有三种可以触发on...
原生js实现双击、三击甚至更多击事件，默认[1, 10]击
fyonecon
09-18 3536
- 原生js实现双击、三击甚至更多击事件，默认[1, 10]击，再多击就无意义了。 /* * 实现自定义的N次连续点击 * many_click(_click_num, call_func) * 必填：_click_num 点击次数 [1, 10] * 必填：call_func 回调函数 * */ let click_before_time = 0; let click_num = 0; f...
js监听鼠标单击和双击事件，冲突问题处理
最新发布
m0_55477902的博客
08-23 445
在浏览器中，单击事件通常会在双击事件之前触发，因此在处理单击和双击事件时，双击操作往往会先触发一次单击事件，这会导致意外的行为。要解决这个问题，可以通过延迟处理单击事件，给浏览器一些时间来判断用户是否会进行双击操作。
JS中解决单击双击事件的冲突
AstroSadmummy的博客
01-10 2029
当一个元素上即绑定了单击事件又绑定了双击事件，双击元素时会先触发单击事件，没有达到我们理想的效果从而影响了用户体验。 解决方法： // 解决同一个元素使用单击双击事件的冲突 // 解决思路：单击事件后延迟一定时间执行函数，如果这段时间内触发了双击事件 // 则清除单击事件，如果这段时间结束了还没第二次点击则认为是单击事件，触发函数 <body> <div>是兄弟就点我！</div> </body> <script> let time
js 实现单击、双击事件
热门推荐
zcc的博客
03-03 1万+
js 实现绑定按钮单击、双击事件： <button id="clickBtn1">单击/双击按钮1</button> <button onclick="btnClick()" ondblclick="btndbClick()">单击/双击按钮2</button> // 方法一 var clickBtn = document.getElementById("clickBtn1"); clickBtn.onclick = funct
js双击会进入2次单机，单双击冲突，避免双击进入单机2次方案
confidence68的专栏
09-21 574
前言 js双击会进入2次单机，单双击冲突，避免双击进入单机2次方案。这个问题是很常见的问题，解决也很简单。 思路 只需要在双击的时候把单机事件清理掉就可以了，不过单机要延迟，这个延迟事件是多久呢？经过测试200毫秒有时候还是会双击触发单机，250ms刚刚好。 代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <title>单双击事件测试</title> </head> &lt
js鼠标事件
m0_57774967的博客
05-06 2551
通过鼠标触发事件, 类似用户的行为: 属性 描述 onclick 当单击鼠标时运行脚本 ondblclick 当双击鼠标时运行脚本 onmousedown 当按下鼠标按钮时运行脚本 onmousemove 当鼠标指针移动时运行脚本 onmouseout 当鼠标指针移..
JavaScript实现鼠标右键双击事件捕获与控制
在Web开发中，JavaScript作为一种广泛使用的客户端脚本语言，有时候开发者可能希望在用户的鼠标操作中捕捉到右键双击（right-click double-click）这一特定行为。然而，浏览器的默认设置通常不会触发JavaScript对...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值