首页
学习
活动
专区
工具
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、touchmove和touchend)

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

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

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

    3.9K21

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

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

    1K30

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

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

    1.2K30

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

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

    2.7K20

    touch事件,touchEvent对象

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

    99830

    盘点原生JavaScript中直接触发事件的方式

    JavaScript提供了多种方式来直接触发事件,无论是在用户交互、程序逻辑处理或是数据更新时。...本文将全面探讨原生JavaScript中各种事件触发方式,并通过深入的技术案例分析,帮助开发者掌握这些方法在实际开发中的应用。...使用dispatchEvent原生JavaScript中触发事件的核心方法是dispatchEvent。这个方法允许开发者为任何DOM元素触发几乎任何类型的事件,包括但不限于点击、改变、输入等。...;});button.dispatchEvent(clickEvent);利用Event构造函数JavaScript的Event构造函数允许创建任意类型的事件对象,这些对象可以随后通过dispatchEvent...;直接模拟事件处理器在较旧的JavaScript代码中,特别是在dispatchEvent方法出现之前,开发者通常会直接调用DOM元素上的事件处理器,如onclick。

    10210

    知识点 | JavaScript事件浅析

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

    1.3K30

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

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

    2.3K40

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

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

    2.1K20

    点击穿透原理及解决

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

    4.3K104

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

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

    49830

    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

    3.1K30

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

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

    5.2K30

    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

    6.6K40

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

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

    2.3K100

    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、mouseup和click事件。移动鼠标会触发mousemove事件。...触摸屏交互会导致"touchstart","touchmove"和"touchend"事件。 我们可以通过scroll事件监测滚动行为,可以通过focus和blur事件监控焦点改变。

    5.6K20
    领券