首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么Javascript的touchstart和mousedown事件同时触发?

JavaScript的touchstart和mousedown事件在某些情况下会同时触发,原因如下:

  1. 触摸设备兼容性:在移动设备上,浏览器会模拟鼠标事件来兼容没有触摸屏的设备。因此,当用户触摸屏幕时,会触发touchstart事件,同时也会触发mousedown事件。
  2. 事件冒泡:当触摸设备上的元素同时具有touchstart和mousedown事件的监听器时,事件会冒泡到父元素,导致两个事件都被触发。

为了解决这个问题,可以采取以下措施:

  1. 阻止事件冒泡:在touchstart或mousedown事件的处理程序中使用event.stopPropagation()方法来阻止事件冒泡,确保只有一个事件被触发。
  2. 使用事件委托:将事件监听器绑定到父元素上,通过事件委托的方式来处理触摸和鼠标事件。这样可以避免同时触发两个事件。
  3. 使用特定的事件:根据需要选择使用touchstart或mousedown事件,避免同时使用两个事件。

总结起来,JavaScript的touchstart和mousedown事件同时触发是由于触摸设备的兼容性和事件冒泡导致的。通过阻止事件冒泡、使用事件委托或选择特定的事件,可以解决这个问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

javaScript — touch事件详解(touchstart、touchmovetouchend)

今天为大家介绍事件主要是触摸事件touchstart、touchmovetouchend。...一开始触摸事件touchstart、touchmovetouchend是iOS版Safari浏览器为了向开发人员传达一些信息新添加事件。...因为ios设备既没有鼠标也没有键盘,所以在为移动Safari浏览器开发交互性网页时候,PC端鼠标键盘事件是不够用。...下面具体说明: touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。 touchmove事件:当手指在屏幕上滑动时候连续地触发。...(返回当事件触发时,鼠标指针水平坐标)、clientY(返回当事件触发时,鼠标指针垂直坐标)、screenX(当某个事件触发时,鼠标指针水平坐标)screenY(返回当某个事件触发时,鼠标指针垂直坐标

1.6K20

Android触摸事件mousedown、mouseup、click事件之间关系

特别需要提到是,只有再触发一个触屏事件时,才会 触发上一个事件mouseout事件。 二、mousedown、mouseup、click事件之间关系 点击select标签元素时候,会弹出下拉。...首先想到是利用click事件控制,发现仍然会有下拉出现…实际这个是mousedown事件控制。 这里就说明下clickmousedown、mouseup。...规范要求,只有在同一个元素上相继触发 mousedown mouseup 事件,才会触发 click 事件;如果 mousedown 或 mouseup 中一个被取消,就不会触发 click 事件...实际这个就利用了click事件要求在同一个元素相继触发mousedown mouseup 事件。...<script type="text/<em>javascript</em>" var len = 0; $('#sel').mousedown(function(){ if(len == 0){//

2.7K30

JavaScript鼠标事件细讲:执行顺序+注意事项+区别比对

JavaScript 中,鼠标事件是 Web 开发中最常用事件类型,本篇算是笔记吧。...与 click 不同,只要鼠标在元素上松开即触发(左右键都行)。mousedown:鼠标在元素上并按下时触发 mousedown 事件。与 click 不同,只要鼠标在元素上按下即触发(左右键都行)。...:mouseovermouseenter异同体现在两个方面:是否支持冒泡事件触发时机可见mouseover事件因其具有冒泡性质,在子元素内移动时候,频繁被触发,如果我们不希望如此,可以使用mouseenter...,会依次触发mousedown、mouseup,前一个事件执行完毕才会执行下一个事件,不会触发click事件鼠标按键mousedown左右键按操按下均可触发,那么怎么区分左右键呢?...0:没有键被按下1:按下左键2:按下右键3:左键与右键同时被按下4:按下中键5:左键与中键同时被按下6:中键与右键同时被按下7:三个键同时被按下参考文章:JS鼠标事件(非常详细) http://c.biancheng.net

3K21

「移动端」touch事件,touchEvent对象

touchcancel - 触摸过程中被系统取消时触发 (很少使用) touch 事件与mouse事件区别: touchstart:手指按下,mousedown:鼠标按下。...target - 触摸 DOM 节点。 二、触摸分类 很多情况下触摸事件会分为两种,单点触发多点触发。 单点触发,指一个指头在屏幕触摸、滑动,主要应用在下拉刷新,手机端banner滑动切换等。...注意:如果是单点触摸,但是有多个手指同时触发,此时需要求三个点平均值作为触摸点。 多点触发:多个手指同时触摸屏幕,进行旋转、缩放、放大、拖拽等操作。...很多情况下,触摸事件跟鼠标事件同时触发,目的是为了在pc端运行时候,没有触摸设备可以使用鼠标代替。...触摸事件跟鼠标事件触发先后顺序: Touchstart > toucheend > mousemove > mousedown > mouseup > click

99030

「移动端」touch事件,touchEvent对象

touchcancel - 触摸过程中被系统取消时触发 (很少使用) touch 事件与mouse事件区别: touchstart:手指按下,mousedown:鼠标按下。...target - 触摸 DOM 节点。 二、触摸分类 很多情况下触摸事件会分为两种,单点触发多点触发。 单点触发,指一个指头在屏幕触摸、滑动,主要应用在下拉刷新,手机端banner滑动切换等。...注意:如果是单点触摸,但是有多个手指同时触发,此时需要求三个点平均值作为触摸点。 多点触发:多个手指同时触摸屏幕,进行旋转、缩放、放大、拖拽等操作。...很多情况下,触摸事件跟鼠标事件同时触发,目的是为了在pc端运行时候,没有触摸设备可以使用鼠标代替。...触摸事件跟鼠标事件触发先后顺序: Touchstart > toucheend > mousemove > mousedown > mouseup > click

1.1K30

「移动端」touch事件,touchEvent对象

touchcancel - 触摸过程中被系统取消时触发 (很少使用) touch 事件与mouse事件区别: touchstart:手指按下,mousedown:鼠标按下。...target - 触摸 DOM 节点。 二、触摸分类 很多情况下触摸事件会分为两种,单点触发多点触发。 单点触发,指一个指头在屏幕触摸、滑动,主要应用在下拉刷新,手机端banner滑动切换等。...注意:如果是单点触摸,但是有多个手指同时触发,此时需要求三个点平均值作为触摸点。 多点触发:多个手指同时触摸屏幕,进行旋转、缩放、放大、拖拽等操作。...很多情况下,触摸事件跟鼠标事件同时触发,目的是为了在pc端运行时候,没有触摸设备可以使用鼠标代替。...触摸事件跟鼠标事件触发先后顺序: Touchstart > toucheend > mousemove > mousedown > mouseup > click

1.9K20

touch事件,touchEvent对象

touchcancel - 触摸过程中被系统取消时触发 (很少使用) touch 事件与mouse事件区别: touchstart:手指按下,mousedown:鼠标按下。...target - 触摸 DOM 节点。 二、触摸分类 很多情况下触摸事件会分为两种,单点触发多点触发。 单点触发,指一个指头在屏幕触摸、滑动,主要应用在下拉刷新,手机端banner滑动切换等。...注意:如果是单点触摸,但是有多个手指同时触发,此时需要求三个点平均值作为触摸点。 多点触发:多个手指同时触摸屏幕,进行旋转、缩放、放大、拖拽等操作。...很多情况下,触摸事件跟鼠标事件同时触发,目的是为了在pc端运行时候,没有触摸设备可以使用鼠标代替。...触摸事件跟鼠标事件触发先后顺序: Touchstart > toucheend > mousemove > mousedown > mouseup > click

90230

知识点 | JavaScript事件浅析

分类:知识点,JavaScript 难度:★ 一个网页由三层组成(html 结构,js 行为,css 表现),一切东西其实都建立在html上,html里面的dom提供了一些事件,然后通过js封装,我们可以用...冒泡呢,与之相反,从你触发节点开始,一级一级往外,直到body,是一个从内到外过程。 那么他们两个是同时进行吗?他们顺序是先捕获,再冒泡。...scroll 滚动时候触发,无限滚动之类一些效果 resize 放大缩小窗口时候发生变化,上面的scroll都需要注意去抖, 鼠标事件 传送门,去看鼠标事件 click 单击事件,在DOM上单击鼠标时候触发...用户在完成一次mousedownmouseup之后触发click。触发顺序是:mousedown -> mouseup -> click。...mousedownmouseup 鼠标按下弹起,使用频率不是很高。可以做一下拖动之类效果。

1.2K30

前端-用 Vue 编写一个长按指令

如何实现 当用户点击按钮时,在点击事件之前会触发另外两个事件: mousedown mouseup。 当用户按下按钮时触发 mousedown 事件,用户松开按钮时调用 mouseup 事件。...我们需要做是: mousedown 事件触发时,启动计时器。 一旦 mouseup 事件在预期 2 秒前被触发,就清除计时器,不要执行相应函数。就当作一个普通点击事件。...启动函数 这个函数包括一个 setTimeout,它是 JavaScript一个基本方法,允许在特定时间之后执行一个函数。 注意,click 事件执行过程中,会触发另外两个事件。...设置触发器 剩下就是将事件监听器添加到想要长按效果按钮上。...因此,我们添加了 touchstart、touchend touchcancel 事件监听器。

2.2K40

移动端页面如何优雅适配各种屏幕,包括PC端

' 接下来修改一下我们上面的示例,给按钮增加一个touchstart事件: 然后分别在模拟器非模拟器环境下单击一下按钮: 显然,非模拟器环境下单击是没有效果,接下来配置一下 @varlet/touch-emulator...,所以这里传true笔者猜测是因为如果是冒泡阶段触发的话,某个元素可能会阻止冒泡,那么就不会触发window上绑定这几个事件了。...eventTarget.dispatchEvent) 鼠标按下显然对应touchstart触发第一个touch事件事件目标肯定也是新,所以需要更新,理论上不同手指事件目标是可能不一样,但是由于桌面端鼠标事件只能有一个...eventTarget不存在当然也需要更新,但是笔者觉得这种情况应该不会出现,因为touchstart或者说是mousedown事件肯定是最先被触发,eventTarget应该已经有值了。...:当前屏幕上所有触摸点列表 targetTouches:当前对象上所有触摸点列表 changedTouches:涉及当前(引发)事件触摸点列表 移动端触摸点是可能存在多个,比如我同时好几个手指一起触摸

1.9K20

点击穿透原理及解决

一、事件触发顺序 PC网页上大部分操作都是用鼠标的,即响应是鼠标事件,包括mousedown、mouseup、mousemoveclick事件。...手指触发触摸事件过程为:touchstart -> touchmove -> touchend。   手机上没有鼠标,但不代表手机不能响应mouse事件(其实是借助touch去触发mouse事件)。...也就是说在移动端click事件可以拆解为:touchstart -> touchmove -> touchend -> click。   ...二、点击穿透场景及原因 有了以上基础,我们就可以理解为什么会出现点击穿透现象了。我们经常会看到“弹窗/浮层”这种东西,我做个了个demo。 ?...整个容器里有一个底层元素div,一个弹出层div,为了让弹出层有模态框效果,我又加了一个遮罩层。

4K104

窥探现代浏览器架构(四)

主线程通过遍历绘画记录来确定在x,y坐标上是哪个对象 最小化发送给主线程事件数 上一篇文章中我们有说过显示器刷新频率通常是一秒钟60次以及我们可以通过让JavaScript代码执行频率屏幕刷新频率保持一致来实现页面的平滑动画效果...对于用户输入来说,触摸屏一般一秒钟会触发60到120次点击事件,而鼠标一般则会每秒触发100次事件,因此输入事件触发频率其实远远高于我们屏幕刷新频率。...如果每秒将诸如 touchmove这种连续被触发事件发送到主线程120次,因为屏幕刷新速度相对来说比较慢,它可能会触发过量点击测试以及JavaScript代码执行。...之前相同事件轴,可是这次事件被合并并延迟调度了 任何诸如 keydown, keyup, mouseup, mousedowntouchstart touchend等相对不怎么频繁发生事件都会被立即派送给主线程...如果你之前从来没有想过为什么DevTools推荐你在事件监听器中使用 passive:true选项或者在script标签中写 async属性的话,我希望这个系列文章可以给你一些关于浏览器为什么需要这些信息来提供更快更流畅用户体验原因

46430

Cypress web自动化39-.trigger()常用鼠标操作事件

前言 在web页面上经常遇到鼠标事件有:鼠标悬停操作,鼠标右键,鼠标长按,拖拽等操作 trigger() trigger 方法用于在 DOM 元素上触发事件 语法使用示例 .trigger(eventName...') // 触发 mousedown 事件 不正确用法 cy.trigger('touchstart') // 错误,不能直接用在cy. cy.location().trigger...参数说明 eventName(字符串) event 在DOM元素上要触发名称。 position(字符串) 应该触发事件位置。该center位置是默认位置。...x(数字) 从元素左侧到触发事件距离(以像素为单位)。 y (数字) 从元素顶部到触发事件距离(以像素为单位)。 options 传递选项对象以更改默认行为.trigger()。...触发mousedown按钮右上方 cy.get('button').trigger('mousedown', 'topRight') 指定相对于左上角明确坐标 cy.get('button').trigger

3K30

JS篇(028)-移动端 click 事件、touch 事件、tap 事件区别

其中包括:touchstart, touchmove, touchend, touchcancel 这四个事件touchstart touchmove touchend 事件可以类比于 mousedown...mouseover mouseup 触发 3.tap 事件在移动端,代替 click 作为点击事件,tap 事件被很多框架(如 zepto)封装,来减少这延迟问题, tap 事件不是原生,所以是封装...delayTime = 200, // 记录是否移动,如果移动,则不触发tap事件 isMove = false; // 在touchstart...,还是会触发点透问题,因为实质是: 在同一个 z 轴上,z-index 不同两个元素,上面的元素是一个绑定了 tap 事件,下面是一个 a 标签,一旦 tap 触发,这个元素就会 display:...none,而从上面的 tap 可以看出,有 touchstart、touchend,所以会 300ms 之后触发 click 事件,而 z-index 已经消失了,所以,触发了下面的 a click

5.9K40

移动端web开发,click touch tap区别

singleTap doubleTap分别代表单次点击双次点击 二:tap穿透处理 使用zepto框架tap点击事件,来规避click事件延迟响应,会出现穿透,即点击会触发非当前层点击事件...三:穿透原因 问题:在HTML5点击了q以后,弹出b弹框 因为tap事件是通过document绑定了touchstarttouchend事件实现,$('.q')上,当touchend事件冒泡到document...而touchend是原生事件,在dom本身上就会被捕获触发 $demo.hide(); e.preventDefault();//阻止“默认行为” }); 五:touch事件 touch是针对触屏手机上触摸事件...现金大多数触屏手机webkit内核提供了touch事件监听 包含:touchstart touchmove touchend touchcancel四个事件 touchstart touchmove...touchend事件可以类比于mousedown mouseover mouseup触发

2.2K100

javascript对点击事件拖动事件区分

1.项目中,为了更好服务用户,经常会设计一个便捷通道,这个通道一般都是“悬浮”。...最重要就是要区分点击事件拖动事件。 我们都知道,点击事件是被点击对象可看做是静止不动,而拖动事件对象很明显是移动。...那么思路就应该是先判断事件对象是否有移动现象, 但是由于不管是在点击事件拖动事件,其都有一个鼠标按下一个过程一个松开过程,只不过拖动事件多了一个拖动动作。...那么完整思路应是这样: 第一:先写出鼠标按下函数; 第二:编写对象是否被拖动函数; 第三:判断对象是否相对原先位置产生了位移; 第四:编写鼠标松开之后代码; 完整代码如下: var timmerHandle...自己整理了一份2018最全面前端学习资料,从最基础HTML+CSS+JS到移动端HTML5到各种框架都有整理,送给每一位前端小伙伴,这里是小白聚集地,欢迎初学进阶中小伙伴!

5K30

DataGrid中DropDownList动态绑定触发DropDownList事件

大家好,又见面了,我是你们朋友全栈君。...我在写DataGrid控件中子控件事件时候,DropDownList事件相比而言麻烦一点,在此,我简单罗列如下(我在此处为了方便这里都用DataGrid中隐藏列存储我所要数据): 一、DropDownList...动态绑定,只需在DataGrid1_ItemDataBound事件中,取出数值进行匹配,便可以了,具体代码如下: 二、触发DataGrid中DropDownList事件 前台: // 取出DropDownList选中项文本int ITid = Convert.ToInt32(item.Cells[0].Text);// 取出该行第一格数据...如发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

1.1K20

JavaScript 编程精解 中文第三版 十五、处理事件

随后本章将会讨论许多类型事件。对象type属性一般持有一个字符串,表示事件(例如"click""mousedown")。...mousedown"事件"mouseup"事件类似于"keydown""keyup"事件,当鼠标按钮按下或释放时触发。当事件发生时,由鼠标指针下方 DOM 节点触发事件。...如果你点击你屏幕,你会得到'mousedown','mouseup''click'事件。 但是这种错觉不是很健壮。...按下鼠标按钮时,会触发mousedown、mouseupclick事件。移动鼠标会触发mousemove事件。...触摸屏交互会导致"touchstart","touchmove""touchend"事件。 我们可以通过scroll事件监测滚动行为,可以通过focusblur事件监控焦点改变。

5.5K20
领券