JS鼠标单击和双击事件参数对比

最新推荐文章于 2024-11-22 22:15:44 发布
原创 最新推荐文章于 2024-11-22 22:15:44 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

本文介绍了JavaScript中如何通过鼠标事件的detail属性来区分单击和双击操作。详细展示了单击与双击事件的不同属性值，如detail的变化，帮助开发者更好地理解和实现鼠标事件的监听。

JS鼠标单击和双击，可以从事件参数的detail属性加以区分。

单击双击中的第1次双击中的第2次
altKey: falsealtKey: falsealtKey: false
bubbles: truebubbles: truebubbles: true
button: 0button: 0button: 0
buttons: 1buttons: 1buttons: 1
cancelBubble: falsecancelBubble: falsecancelBubble: false
cancelable: truecancelable: truecancelable: true
clientX: 831clientX: 831clientX: 831
clientY: 104clientY: 287clientY: 287
ctrlKey: falsectrlKey: falsectrlKey: false
currentTarget: nullcurrentTarget: nullcurrentTarget: null
defaultPrevented: falsedefaultPrevented: falsedefaultPrevented: false
detail: 1detail: 1detail: 2
eventPhase: 0eventPhase: 0eventPhase: 0
fromElement: nullfromElement: nullfromElement: null
isTrusted: trueisTrusted: trueisTrusted: true
isTrusted: trueisTrusted: trueisTrusted: true
layerX: 831layerX: 831layerX: 831
layerY: 104layerY: 287layerY: 287
metaKey: falsemetaKey: falsemetaKey: false
movementX: 0movementX: 0movementX: 0
movementY: 0movementY: 0movementY: 0
offsetX: 831offsetX: 831offsetX: 831
offsetY: 104offsetY: 287offsetY: 287
pageX: 831pageX: 831pageX: 831
pageY: 104pageY: 287pageY: 287
path: Array[7]path: Array[7]path: Array[7]
relatedTarget: nullrelatedTarget: nullrelatedTarget: null
retureValue: trueretureValue: trueretureValue: true
returnValue: truereturnValue: truereturnValue: true
screenX: 810screenX: 810screenX: 810
screenY: 179screenY: 344screenY: 344
shiftKey: falseshiftKey: falseshiftKey: false
srcElement: canvas.ol-unselectablesrcElement: canvas.ol-unselectablesrcElement: canvas.ol-unselectable
target: canvas.ol-unselectabletarget: canvas.ol-unselectabletarget: canvas.ol-unselectable
timeStamp: 1479972489973timeStamp: 1479972491729timeStamp: 1479972491900
toElement: canvas.ol-unselectabletoElement: canvas.ol-unselectabletoElement: canvas.ol-unselectable
type: "mousedown"type: "mousedown"type: "mousedown"
view: Windowview: Windowview: Window
webkitMovementX: 0webkitMovementX: 0webkitMovementX: 0
webkitMovementY: 0webkitMovementY: 0webkitMovementY: 0
which: 1which: 1which: 1
x: 831x: 831x: 831
y: 287y: 287

gis9
关注
JS - 解决鼠标单击、双击事件冲突问题（原生js实现）
04-10 1467
由于鼠标双击时每一次触发双击事件都会引起两次单击事件和一次双击事件，原生的js不提供专门的双击事件。 因为业务原因，双击和单机都绑定了不同的业务，在双击的时候又触发了单机，影响了页面的正常显示 出现问题的代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"&gt...
JavaScript学习笔记（十五）Event事件（上）_js onclick event(1)
2401_84254087的博客
04-28 1058
console.log(e.X轴坐标点信息)console.log(e.Y轴坐标点信息)相对于浏览器窗口你点击的坐标点。相对于页面你点击的坐标点。点击按键信息（了解）
JS中的鼠标事件
m0_70185826的博客
07-01 1万+
通过鼠标触发事件，类似用户的行为：mouseover事件和mouseenter事件，都是鼠标进入一个节点时触发。两者的区别是，mouseenter事件只触发一次，而只要鼠标在节点内部移动，mouseover事件会在子节点上触发多次。 MouseEvent.button属性返回一个数值，表示事件发生时按下了鼠标的哪个键。 0代表左键 1代表中键 2代表右键 2. MouseEvent.clientX，MouseEvent.clientY MouseEvent.clientX属性返回鼠标位置相对于浏
【JavaScript 教程】事件——鼠标事件
web前端开发
06-27 1482
作者 | 阮一峰鼠标事件的种类鼠标事件指与鼠标相关的事件，继承了MouseEvent接口。具体的事件主要有以下一些。click：按下鼠标（通常是按下主按钮）时触发。dbl...
JavaScript 事件类型（键盘事件，鼠标事件，焦点事件）
QIANDXX的博客
04-23 1387
键盘事件 鼠标事件 焦点事件 键盘事件 事件 发生时机 onkeydown 键盘按键按下 keypress 键盘按键按住 keyup 键盘按键松开 监听某个按键事件 document.onkeydown = function(event) { // 键盘按下时触发 console.log('key down'); }; document.onkeypress = function(event) { // 键盘按住时触发 console.log.
鼠标事件中参数e对象的值以及clientX、offsetX、screenX、pageX、x的区别
qq_37734787的博客
11-30 1201
别人博客 由鼠标事件（MouseEvent）可以发现： 其中包含了许多的坐标，且每个坐标的含义都不一样。下面我们来挨个介绍常用的坐标，以及它们的含义。 一、clientX、clientY 点击位置距离当前body可视区域的x，y坐标 二、pageX、pageY 对于整个页面来说，包括了被卷去的body部分的长度 三、screenX、screenY 点击位置距离当前电脑屏幕的x，y坐标 四、offsetX、offsetY 相对于带有定位的父盒子的x，y坐标 五、x、y 和screenX、screenY一样 看
button单击和双击
05-25
然而，双击事件并非所有平台都原生支持，尤其是在某些 GUI 库中（如 Java Swing 的 `Button` 控件），需要额外逻辑来区分单击和双击的行为[^2]。 #### 三、具体实现方案 以下是几种常见的实现方法： ##### 方法一...
jquery事件机制扩展插件 jquery鼠标右键事件
10-28
然而，jQuery本身并不直接支持鼠标右键点击事件，通常开发者会通过监听`mousedown`事件并检查鼠标按钮编号来实现这一功能。为了简化这个过程，我们可以创建一个jQuery插件来扩展其事件机制，专门处理鼠标右键点击。 ...
使用Windows脚本在网页上自动化鼠标单击事件
最新发布
07-17
支持多平台（Windows、Linux和Mac）、多浏览器（IE，Mozilla Firefox、Safari、Google Chrome、Opera、Edge）、多语言（Java、Python、C#、JavaScript、Ruby），能够让测试脚本像真实用户一样在浏览器中操作。...
用JavaScript 处理事件 （一）事件的绑定
2402_84051608的博客
11-22 788
用JavaScript 处理事件 （一）事件的绑定
js 鼠标事件各个参数示意
Thea12138的博客
09-26 1110
鼠标指针在视口中的坐标（不包括任何滚动偏移）。：被按下的鼠标按钮。1 左键 2滚轮 3右键。：表示按下哪些鼠标按钮的位掩码。：是否按下了相应的键盘按键。：鼠标指针在屏幕中的坐标。
js中单击和双击事件的区分
热门推荐
csmzl的博客
01-03 3万+
js中单击和双击事件的区分1. 首先要了解鼠标点击（单击或双击）时包含的事件。mousedown 事件：  当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。mouseup 事件：  当在元素上放松鼠标按钮时，会发生 mouseup 事件。与 click 事件不同，mouseup 事
js事件分类（鼠标、键盘、文本、其它、特殊事件）、事件的3种绑定方式和对应解除方式、自定义事件、事件冒泡和捕获、事件属性（源事件、鼠标事件属性、按键事件属性）、事件方法。
AIWWY的博客
04-13 1757
目录 事件分类 鼠标事件 click mousedown mouseup mousemove contextmenu mouseover/mouseenter mouseout/mouseleave 键盘事件 keydown keypress keyup 文本事件 input change focus blur select reset submit 其它事件 scroll load unload error resize touchstart（移动端
threeJs 模型单双击点击事件
jinse29的博客
02-22 1179
threeJS的事件是计算射线和模型的交点的方法，其中核心是判断event.detail属性，分别打印下单双击事件下的event。控制台根据鼠标的点击次数进行输出，注意的是双击事件时，先打印单击再双击。threeJS中对模型的点击事件，单击还是双击，先放个简单的例子👇。所以根据event.detail属性进行点击事件判断即可实现。关于threeJS模型的引入方法，可以看这个☞。
前端监控
04-21 327
前端监控 大岗 1. 链路监控 2. 错误监控 3. 性能监控 数据上报 一、错误监控 语法错误 通过onerror取得事件对象，并可以分析出具体出错的位置 { bubbles: false cancelBubble: false cancelable: true colno: 28 composed: false currentTarget: defaultPrevented: false error: TypeError: Cann
深入理解js自定义事件以及事件的监听触发移除等操作
zyz00000000的博客
02-03 2755
EventTarget EventTarget是一个由对象实现的DOM接口，这些对象可以接收事件，并可能有针对事件的监听器。 Element、Document、Window是最常见的事件目标，但是其他对象也可以是事件目标。例如XMLHttpRequest、AudioNode、AudioContext等 许多事件目标(包括Element、Document和Window)也支持通过onevent属性和属性设置事件处理程序。 EventTarget.addEventListener() 兼容性：兼.
解决jQuery中dbclick事件触发两次click事件
Quber
11-15 598
在jQuery事件绑定中，dbclick可以触发两次click事件。例如一个DOM元素div，既绑定了 click 事件，又绑定了 dblclick 事件，这两个事件分别要做独立的事情。事件处理上没有冲突，都可以各自完成各自的操作。双击的时候虽然是执行了 dblclick 事件，但是在这之前，也执行了click 事件，那么，如何来禁止或者说屏蔽这次多余的 click 事件呢？本文将提供给...
JS事件之鼠标事件
qq_57215961的博客
05-25 2796
鼠标事件的类型 onclick：单击事件 ondblclick：双击 oncontextmenu：右键菜单 onmouseover：鼠标移入 onmouseout：鼠标移出 onmouseenter：鼠标移入 onmouseleave：鼠标移出 onmousedown：鼠标按下 onmouseup：鼠标抬起 onmousemove：鼠标移动 onmouseover、onmouseout与onmouseenter、onmouseleave 两者都有鼠标移入移出的作用，但是建议使用on
鼠标单击和双击事件C#
03-24
### C# 中鼠标单击和双击事件的处理 在 C# 的 Windows Forms 应用程序中，处理鼠标单击和双击事件需要特别注意两者的关联关系。由于 `Click` 和 `DoubleClick` 是两个独立的事件，在某些情况下，当发生双击操作时，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值