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

最新推荐文章于 2024-08-23 17:28:19 发布
最新推荐文章于 2024-08-23 17:28:19 发布
阅读量1.6k 收藏 1
点赞数 6
分类专栏： 学习笔记 文章标签： javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40390503/article/details/111596018
版权
本文讨论了JavaScript中处理鼠标单击、双击、多击事件的问题，特别是如何确保双击仅执行期望的函数，同时提出了一种通过计数和定时器实现的通用点击事件解决方案。
摘要由CSDN通过智能技术生成

如果用

<div ondblclick="f2()" onclick="f1()"></div>

那么双击，会先执行两次f1()后,再执行f2();
而我们双击肯定是只想执行f2();所有我们得想别的方法。
其实多击好像并没有什么用处。。。

思路是这样的：只监听单击事件。count=0，每次点击时count都会+1，并且开始计时。在计时结束后，count是几就是几击(并把count归0)。由于每次点击都会重新设置计时器，所以在等待时间内如果出现了另外一次点击就会重新等待。这样不管是单击还是100击，点击操作结束后等待的时间都是相同的。

<html>
<head
最低0.47元/天 解锁文章
天依咋又胖了
关注
专栏目录
JS - 解决鼠标单击、双击事件冲突问题（原生js实现）
04-10 1353
由于鼠标双击时每一次触发双击事件都会引起两次单击事件和一次双击事件，原生的js不提供专门的双击事件。 因为业务原因，双击和单机都绑定了不同的业务，在双击的时候又触发了单机，影响了页面的正常显示 出现问题的代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"&gt...
js 双击事件，三击事件，多击事件的原理及其方法
qq_37016928的博客
08-28 6503
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;button i
原生js实现双击、三击甚至更多击事件，默认[1, 10]击
User XXX Blog
09-18 3558
- 原生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 665
在浏览器中，单击事件通常会在双击事件之前触发，因此在处理单击和双击事件时，双击操作往往会先触发一次单击事件，这会导致意外的行为。要解决这个问题，可以通过延迟处理单击事件，给浏览器一些时间来判断用户是否会进行双击操作。
js 模拟鼠标双击
nongcunqq的博客
03-31 2079
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实现鼠标单击或者双击事件
weixin_30267691的博客
01-08 658
// timer为全局变量 getClickEmail1(_type) { clearTimeout(this.timer); if (_type == 1) { if (event.detail == 2) return; this.timer = setTimeout(function() { ...
js单击/双击/三击，长按/单击
wt102的博客
03-08 697
之前写项目的时候遇到了一个这样的需求，对于页面上的一个元素做单击/长按，触发不同事件，后面考虑到鲁棒性还是换成单击/双击/三击的形式了，不过这些事件之间的区分给人的印象还是深刻的（其实就是卡在这里太久了，乐），写篇文章记录一下。
js鼠标单击和双击事件冲突问题的快速解决方法
01-19
如果在一个DOM对象上同时绑定单击(click)和双击(dblclick)事件，当在这个DOM对象上发生双击事件时，第一次点击（click）会 触发一次单击（click）事件，第二次点击（连续的）也会触发双击（dblclick）事件，还是会...
JS实现鼠标单击与双击事件共存
12-10
一直都认为在Web开发中，双击事件都是少至又少地使用，直到最近项目需要，要在一个按钮上绑定单击与双击两件事件。开始也觉得不就是给按钮绑下两个事件而已罢了……只是后来才明白，是我想得太简单，在双击事件触发...
javascript事件列表解说
gx_xiaon的专栏
02-23 967
javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3、N2
jQuery 三击事件实现代码
12-01
直接给出代码如下： 代码如下:jQuery.event.special.tripleclick = {    setup: function(data, namespaces) {        var elem = this, $elem = jQuery(elem);        $elem.bind(‘click’, jQuery.event.special.tripleclick.handler);    },     teardown: function(namespaces) {        var elem = this, $elem = jQuery(elem);     
捕捉鼠标右键双击
11-27
如果不做特殊处理，Js捕捉不到右键双击事件。而在某些情况下，控制不了网页的鼠标右键双击事件，使得我们的web应用处于失控状态，给浏览者带来不愉快的感受，因此，捕捉并控制鼠标右键的双击事件就很有必要了。 本资料提供的代码，可以捕捉鼠标右键的双击事件。
JS鼠标3次点击事件实现及扩展思路
xiazhiqiang01的博客
09-13 5289
这几天看了一下JavaScript高级程序设计中的Dom事件相关内容，同时看到网上有关鼠标多次点击事件，鼠标事件是简单、常用的事件之一，于是便针对点击事件进行一些小的扩展和实现，增强对Dom事件的进一步理解。其中的实现和思路是自己总结的，有什么不对的地方还请大神们交流指正。 1、制作一个通用的事件处理模块（原生实现） 以下实现基于AMD定义模块方式： /** * 浏览器兼容事件处理
js 单击、双击、连续多次点击
weixin_44037153的博客
08-08 8527
原生javascript为我们提供了单击和双击（click 和 dblclick）两种点击事件的监听 单击 var oBtn = document.getElementById('clickBtn'); oBtn.onclick = function(){ console.log('单击'); } 双击 var oBtn = document.getElementById('clickBtn'); oBtn.ondblclick = function(){ console.log('双击'); }
javascript解决鼠标单击双击冲突方法
紫竹blog
12-02 1228
在双击事件(dblclick)过程中，触发的两次单击事件(click)中，第一次的单击事件(click)会被屏蔽掉，但第二次不会。也就是说双击事件(dblclick)会返回一次单击事件(click)结果和一次双击事件(dblclick) 结果。而不是一次双击事件(dblclick)结果和两次单击事件结果(click)。 所以我们只要屏蔽一次click事件就可以了。 a.bind("myC
js简单点击事件
weixin_44550198的博客
01-17 9925
先在HTML布局，给个外层盒子，盒子里面包含一个按钮，按钮里加一个id用于js调用 部分截图和代码如下： 效果图： 然后编写js代码，声明一个变量调用html定义的id，通过id选泽到它然后写点击事件，使用confirm可以弹出一个提示框，提示框有确定取消按钮，而aler只有确定按钮。 部分代码和截图如下： confirm提示框有确定取消按钮 效果图： Alert提示框的js代码如下， ...
js鼠标事件
m0_57774967的博客
05-06 2565
通过鼠标触发事件, 类似用户的行为: 属性 描述 onclick 当单击鼠标时运行脚本 ondblclick 当双击鼠标时运行脚本 onmousedown 当按下鼠标按钮时运行脚本 onmousemove 当鼠标指针移动时运行脚本 onmouseout 当鼠标指针移..
JS三大事件
m0_72202712的博客
07-01 276
JS事件
js实现鼠标单击模拟为鼠标双击
04-25
可以通过以下代码实现： ``` var clickCount = 0; var delay = 250; var timer = null; function simulateDoubleClick() { ... // 执行双击操作 console.log('双击');...这样就可以将鼠标单击模拟为鼠标双击。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值