click、touch，mouse事件的优先级

最新推荐文章于 2023-11-22 19:13:43 发布
最新推荐文章于 2023-11-22 19:13:43 发布
阅读量1k 收藏 2
点赞数
分类专栏： Javascript 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Celester_best/article/details/123341365
版权
当DOM元素同时绑定click、touch和mouse事件时，事件触发的优先级是怎样的？在移动端，touchstart先于touchend和click触发，而移动端长按不会触发click。在PC端，mousedown先于click发生。
摘要由CSDN通过智能技术生成

问题：一个DOM元素同时绑定click、touch、mouse(以mousedown为例)事件时，事件的优先级是怎样的？

首先需要注意的是，pc端没有touch事件，所以在pc端不会响应touchstart、touchmove、touchend事件。在移动端，可以响应touchstart、touchmove、touchend事件。

pc端的事件优先级

mousedown事件→click事件

移动的事件优先级

点击

touchstart→touchend→click

 

按住之后不松开，并移动，最后松开

touchstart→touchmove→touchend

ps:长按时，并不会响应click事件

测试代码

<template>
  <div>
    <div
      class="click-touch-wrap"
      @click="cli
最低0.47元/天 解锁文章
Celester_best
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
android中OnClick,OnTouch,OnTouchEvent的传递及优先级研究
走在android的路上
07-31 1876
最近在写一个有多个fragment的应用
事件响应的优先级、stopProgapation禁止下层组件响应
weixin_33910385的博客
09-16 146
cocos2d-js没有完整的鼠标事件处理，这点比js/flash的要差一些，不过凑合着也可以用了。 一般界面编程，可以用显示列表的Node作为监听器的优先级，在上方的会比下方的高优先级。 而cocos2d-js没有stopImmediatePropagation，只有stopProgapation，一旦某个监听器中执行了stopProgapation，后续的监听器都不会被执行。这里并没有js...
click、onclick、on事件执行优先级
热门推荐
xsf1840的博客
08-16 1万+
按照事件冒泡的触发顺序，应该是我的事件先触发 结果不是这样的。我发现使用$().click(function(){})绑定的事件，而我使用$("body").on("click","",function(){})绑定的事件。 我希望比较一下它们的差别，专门写了一下代码，查看运行结果。   代码如下： 1 2 3 4 5 div id="
mouse鼠标事件
weixin_44388697的博客
12-21 2915
mouseover和mouseenter都是鼠标移到元素身上就触发，区别是 1、mouseover经过自身盒子触发，经过子盒子也触发，拥有冒泡特性 2、mouseenter只经过自身盒子触发，没有冒泡特性 mouseenter不会冒泡，搭配鼠标离开事件mouseleave同样不会冒泡! 1.mouseover与mouseout成对，mouseenter与mouseleave成对（连它们都成对了。。。默默画个圈） 2.mouseover触发优先级高于mouseenter，mouseout触发优先级高于mous
JS 页面初始事件优先级
风吹啊吹啊吹吹吹
07-11 2025
$(document).ready()是文档加载完后执行；$(function(){})和上面是一样，因为jquery默认的就是ready，所以执行力上一样的；window.onload就是所有的一切都加载完后才执行函数里面的window.onload = function(){ //执行这里面的，所以只要是写在这里面的任何绑定事件，只有你不写错，都能执行 //判断图片是否加载完成也是用img.o...
触摸事件的处理流程
weixin_45365889的博客
07-26 382
前言 用户通过触摸屏幕与手机交互，所以触摸事件成为了交互中相对重要的因素。比如我们想要点外卖，就要通过手指触摸屏幕打开外卖软件，选择喜爱的菜品下单等待外卖小哥送餐，然而在等待过程中，我们还可以查看当前外卖的状态，这些行为我们都需要触摸屏幕来完成。那么问题来了，应用软件是如何知道手指触摸的是哪一块区域呢？ 接下来让我们带着问题来分析触摸事件是如何处理的。 触摸事件 当触摸事件产生时，最先传递...
Android进阶-- Android事件分发机制
sinat_33150417的博客
07-30 213
不同于前几篇文章的介绍，一步步的从调用到源码的去分析，关于Android事件分发机制，先明确一些概念，会更好理解。 1.事件分发从哪里开始，分发的又是什么？ 事件分发从用户触摸屏幕开始，分发的是touch事件。 2.什么是touch事件？ Touch事件也就是点击事件，touch事件将发生的位置、时间等封装成MotionEvent对象 3.MotionEvent 有四种类型，分别是： ...
Android进阶必备：滑动冲突解决与事件分发机制（附视频讲解）这篇看完还不懂请寄刀片
chuhe1989的博客
09-22 1074
1、前言 Android学习一段时间，需求做多了必然会遇到滑动冲突问题，比如在一个ScrollView中要嵌套一个地图View，这时候触摸移动地图或者放大缩小地图就会变得不太准确甚至没有反应，这就是遇到了滑动冲突，ScrollView中上下滑动与地图的触摸手势发生冲突。想要解决滑动冲突就不得不提到Android的事件分发机制，只有吃透了事件分发，才能对滑动冲突的解决得心应手。 作者：胖宅老鼠 链接：https://juejin.im/post/6844903829482242056 B站视频讲解：http
Android进阶知识树——View、ViewGroup事件分发机制详解
浅谈Android
12-19 2764
对于Android开发者来说，自定义View是必须攻克的一关，也是从初级工程师迈向高级的进阶关卡，要想通过此阶段，除了必须掌握View的测量、绘制、滑动等基础知识外，更要掌握View的核心知识点：View的事件分发，本篇就一起从源码的角度分析View和ViewGroup的事件分发机制； 1、View的事件分发 在我们平时的使用或写自定义View时，都会直接或间接的使用View的事件分发，Vie...
在Vue 3中，点击事件的触发顺序是先执行click事件修饰符，然后再触发监听click事件
最新发布
隔壁老王的博客
11-22 623
然后，由于click事件修饰符没有阻止事件的传播，所以会继续触发handleClick方法，输出"Button clicked!在Vue 3中，点击事件的触发顺序是先执行click事件修饰符，然后再触发监听click事件。这意味着在事件处理函数中，你可以使用click事件修饰符来修改事件对象或执行一些特定的逻辑，然后再通过监听click事件来执行更一般的处理程序。总结来说，Vue 3中的click事件修饰符和监听click事件是按照预期的顺序执行的。首先执行修饰符方法，然后触发监听器方法。
touch和click优先性
weixin_30487201的博客
04-19 125
jQuery的touch事件是当用户触摸事件（页面）时触发的。 jQuery的click事件是当用户点击元素时触发的。 而事件执行流程是手指点击一个元素，会经过：touchstart --> touchmove -> touchend --》click。所以在触发touch事件时，默认会自动触发click事件。 阻止这样继承的方法就是使用preventdefault（）方法，如：...
【Electron-Vue】构建桌面应用（38）- 事件的优先级导致点击事件无效
chenqk_123的专栏
06-30 539
最近在使用Electron-vue做项目的时候发现，给隐藏域中的list添加click事件，无法获取到点击的值，在相应的函数中打印信息，并没有获得输出信息，也就是说可能压根就没有触发click事件。 讲一下我的需求：在客户端登陆成功后，记录用户使用过的地址和端口号，以便用户下次登录时，可以直接从下拉菜单中选择。 由于前面的组件封装了关于表单的校验，以脱离文档流position:absolute的方式给出用户输入信息，而现在需要做的用于展示用户输入过的地址集合也是通过这种方式去展示。 具体的思路是： 当用
我的Cocos2d-x学习笔记（十一）触摸、触摸优先级
箭已离弓的专栏
05-30 1128
Cocos2d-x默认只有CCLayer及其派生类才有触摸的功能。 CCLayer中关于触摸的部分代码如下： class CC_DLL CCLayer : public CCNode, public CCTouchDelegate, public CCAccelerometerDelegate, public CCKeypadDelegate { public: virtual void s
vue绑定多个@click事件，与其事件的触发顺序
weixin_46020319的博客
11-04 7230
vue绑定多个@click事件，与其事件的触发顺序vue绑定多个@click事件，与其事件的触发顺序vue绑定多个click事件 vue绑定多个@click事件，与其事件的触发顺序 vue绑定多个click事件 //标签 <button @click="f1();f2()">btn</button> //方法 f1(){ console.log("111"); }, f2(){ console.log("222") }, //结果是先触发f1，再触发f2 比较有意思的事把f
用PC上的浏览器调测touch事件
beeworkshop的博客
11-17 3854
手机前端的开发中，会涉及到调测touch事件——touchstart()，touchmove()，touchend()。如果使用PC端的浏览器，可能会出现不支持上述事件的情况。那么怎么让PC端的浏览器支持touch事件呢？ 1. 对于chrome浏览器 在google chrome浏览器中开启响应式调测模式。 2. 在Firebox浏览器中 开启响应式模式并开启触摸模拟。 ...
touchstart, touchmove, touchend, mousedown, mousemove, mouseup, 手机端和pc端点击及触摸事件
Sayesan的专栏
11-05 2581
touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。 touchend事件：当手指从屏幕上离开的时候触发。 touchcancel事件：当系统停止跟踪触摸的时候触发。  initTouchEvents: function...
解决@touchstart和@click事件触发冲突问题,可使@touchstart和@click分别执行
weixin_42479305的博客
11-08 6236
只用在@click加stop，且在onTouchMove上添加阻止点击事件触发——e.preventDefault();即可完成拖动事件@touchstart和点击事件@click分别执行功能，且可以修复拖动按钮时会导致页面滚动问题。@touchstart不加修饰符,在onTouchStart点击事件中触发阻止click事件。如果需要阻止点击事件不触发，只触发@touchstart;事件，比如拖拽事件同时添加返回上一页功能;一般出现在我们给某个元素同时绑定。
mousedown、mouseup、click事件之间的关系及执行顺序
u011200562的博客
10-30 1243
三个事件的触发时机 mousedown 当鼠标指针移动到元素上方，并按下鼠标按键（左、右键均可）时，会发生mousedown事件。 与click事件不同，mousedown事件仅需要按键被按下，而不需要松开即可发生。 mouseup 当在元素上松开鼠标按键（左、右键均可）时，会发生mouseup事件。 与click事件不同，mouseup事件仅需要松开按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。 click 当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，...
c# 使用textbox的mouseclick事件
08-12
在C#中使用TextBox的MouseClick事件，可以通过定义事件处理方法来实现。你可以在代码中定义textBox_MouseClick事件处理，代码如下所示: ```csharp private void textBox_MouseClick(object sender, MouseEventArgs e) { if (textBox1.Focused) { textBox1.BackColor = Color.Cyan; } else { textBox1.BackColor = Color.Teal; } if (textBox2.Focused) { textBox2.BackColor = Color.Cyan; } else { textBox2.BackColor = Color.Teal; } } ``` 在这个事件处理方法中，我们可以根据TextBox是否处于焦点状态来改变其背景颜色。如果textBox1处于焦点状态，将其背景颜色设置为Cyan，否则设置为Teal。同样的逻辑也适用于textBox2。 你可以在Form的构造函数或者其他适当的位置，通过textBox.MouseClick事件与textBox_MouseClick事件处理方法进行绑定。具体的代码如下所示： ```csharp public Form1() { InitializeComponent(); textBox1.MouseClick += textBox_MouseClick; textBox2.MouseClick += textBox_MouseClick; } ``` 通过这样的绑定，当TextBox被点击时，textBox_MouseClick事件处理方法将会被调用，从而实现你想要的效果。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [C#TextBox 失去与获取焦点事件](https://blog.csdn.net/ou832339/article/details/39122395)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* [C# windowForm TextBox获得焦点时高亮显示](https://blog.csdn.net/zcn596785154/article/details/120214380)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值