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

最新推荐文章于 2022-09-16 11:56:51 发布
最新推荐文章于 2022-09-16 11:56:51 发布
阅读量1k 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gis9/article/details/53321889
版权

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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js事件分类（鼠标、键盘、文本、其它、特殊事件）、事件的3种绑定方式和对应解除方式、自定义事件、事件冒泡和捕获、事件属性（源事件、鼠标事件属性、按键事件属性）、事件方法。
AIWWY的博客
04-13 1487
目录 事件分类 鼠标事件 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（移动端
用JavaScript实现双击事件
qq_62476137的博客
04-22 2687
经过这样编写我们只需要改动一些if逻辑结构就可实现区分三连击,甚至多连击事件。虽然Js已经提供了"dbclick"事件，但自己编写函数实现可以实现思维启发。
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事件属性总结【鼠标 / 键盘 / 表单】
前端、python爱好者
10-20 697
前言： JS事件通常是指用户通过鼠标或者键盘以及其他方式对浏览器或浏览器网页中的某些节点或者元素进行操作，是用户与浏览器交互最为常见的方式，主要包含以下事件： 1、鼠标事件 2、键盘事件 3、表单事件 鼠标事件 下列代码使用了body作为点击的元素，需要在body中加入一个元素节点或文字节点，为方便区别比较，事件相近的做到了一起，常用的鼠标事件前加了 ✦ ✦1、onclick onclick是最常见的鼠标事件，由用户使用鼠标左键点击后触发相应的函数方法 document.body.onclick = fun
js 实现双击事件
chenluhe123的专栏
09-16 6418
实现双击事件思路：通过给按钮绑定单击事件，然后定义一个数组记录每次单击的按钮标识和单击的时间戳，然后每次单击后比较数组最后两个元素，如果最后两个元素dom标识为同一个dom并且时间差值小于500ms,则判定为双击事件，执行双击事件逻辑。
js鼠标单击和双击事件冲突问题的快速解决方法
10-21
下面小编就为大家带来一篇js鼠标单击和双击事件冲突问题的快速解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JS实现鼠标单击与双击事件共存
12-10
开始也觉得不就是给按钮绑下两个事件而已罢了……只是后来才明白，是我想得太简单，在双击事件触发的同时也会触发单击的~囧 通过一番研究后，终于利用JS中“setTimeout”延时执行方法的办法，将单击延迟300毫秒执行...
单击和双击事件的冲突处理示例代码
09-04
主要介绍了单击和双击事件的冲突处理方法,需要的朋友可以参考下
js:如何实现双击事件
qq_44697303的博客
07-20 7068
思路 设置一个全局变量clock=0； 每次调用这个方法把clock++,然后开启一个setTimeout为500毫秒，到时间后把clock清零； 然后在这之外判断，if(clock==2){执行相应操作}； 具体代码： btn.onclick = function (e) { e.preventDefault(); cloc++; setTimeout(() => { cloc = 0; }, 500) if (cloc ==
js 单击、双击、连续多次点击
weixin_44037153的博客
08-08 8411
原生javascript为我们提供了单击和双击（click 和 dblclick）两种点击事件的监听 单击 var oBtn = document.getElementById('clickBtn'); oBtn.onclick = function(){ console.log('单击'); } 双击 var oBtn = document.getElementById('clickBtn'); oBtn.ondblclick = function(){ console.log('双击'); }
鼠标事件中参数e对象的值以及clientX、offsetX、screenX、pageX、x的区别
qq_37734787的博客
11-30 900
别人博客 由鼠标事件（MouseEvent）可以发现： 其中包含了许多的坐标，且每个坐标的含义都不一样。下面我们来挨个介绍常用的坐标，以及它们的含义。 一、clientX、clientY 点击位置距离当前body可视区域的x，y坐标 二、pageX、pageY 对于整个页面来说，包括了被卷去的body部分的长度 三、screenX、screenY 点击位置距离当前电脑屏幕的x，y坐标 四、offsetX、offsetY 相对于带有定位的父盒子的x，y坐标 五、x、y 和screenX、screenY一样 看
基于WebStorm记录得HTML--Event事件
zgz102928的博客
01-26 747
1.1 事件 事件：是可以被js检测到的行为，实质上是一种交互操作。 例如：我们可以给某按钮添加一个【onClick点击事件】，当用户对按钮发生点击时来触发某个函数。 事件的作用： (1)各个元素之间可以借助事件来进行交互 (2)用户和页面之间也可以通过事件来交互 (3)后端和页面之间也可以通过事件来交互（减缓服务器的压力） ps：注...
js判断鼠标单击或者双击事件
shenmill的博客
02-23 4万+
单击事件是指鼠标发生一次点击事件，经历了onmousedown,onmouseup,onclick的过程；双击事件是指鼠标连续在同一位置连续点击两次，经历了onmousedown，onmouseup，onclick，onmousedown，onmouseup，onclick，ondblclick的过程
js中鼠标的单击以及双击事件
windy2014s的博客
06-12 8876
html中，onclick为单击事件，ondblclick为双击事件&lt;img id="flatImg" src="${ctx }/static/img/flat.jpg" onclick="infoFun('${topicFlat.flatId }', '${topicFlat.topicId }')" ondblclick="editFun('${topicFlat.flat...
js实现单击事件和双击事件
热门推荐
zoopzz的博客
08-06 5万+
一下代码可以解决单击事件和双击事件冲突的问题 //单击事件 var timeoutID = null; $("#test).on('click',function(e){ clearTimeout(timeoutID); timeoutID = window.setTimeout(function (){ //写单击事件要干的事 },300); }); //双...
jquery双击事件
雨巷的博客
03-08 3万+
在开发过程中经常会遇到使用双击事件或者避免短时间内连续触发单击事件的逻辑。这里介绍一下对类似问题的处理方法。 一、jquery的dblclick事件 一个DOM元素，如：div，既绑定了 click 事件，又绑定了 dblclick 事件，这两个事件分别要做独立的事情。事件处理上没有冲突，都可以各自 完成各自的操作。双击的时候虽然是执行了 dblclick 事件，但是在这之前，也执行了 ...
JavaScript 将事件event作为参数传递，鼠标移动事件
houyanhua1的专栏
11-07 5290
网页标题 #d1{ background-color:black; height:300px; color:white; cursor:crosshair; /* 表示鼠标的形状 */ } function fn(e){ //将事件event作为参数传递 var x=e.clientX; //获取鼠标事件的坐标
关于点击事件的相关参数
gyueh的博客
10-29 1031
xml部分代码 <view class="clearance" wx:for="{{containerOrderList}}" wx:key="{{item.containerID}}" > <!-- data-id='{{item.containerID}}' bindtap='toOrderDetail' --> <view data-id='{{item....
ue4 鼠标单击和双击
最新发布
05-31
在UE4中，您可以使用Input Component来检测鼠标单击和双击事件。以下是一些示例代码： 首先，您需要在Actor或Pawn中添加Input Component。在构造函数中添加以下代码： ```cpp UInputComponent* InputComponent = ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值