4.移动端的事件冒泡与捕获

最新推荐文章于 2022-02-23 02:02:12 发布
最新推荐文章于 2022-02-23 02:02:12 发布
阅读量1.9k 收藏
点赞数
分类专栏： 移动端 文章标签： 移动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Kasekale/article/details/78236268
版权

这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述

冒泡 : 点击一个元素 按照 DOM 节点 把这个事件一直向上传递下去 从下向上传递下去

捕获 : 点击一个元素 按照 DOM 节点 把这个事件一直向下传递下去 从上向下传递下去

Kasekale
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)1
08-08
1. 事件捕获与冒泡阶段： - **事件捕获**：事件从最外层的document开始，向下逐级传递到最具体的元素（事件的目标元素）。这种方式确保了父级元素的事件处理函数先于子元素执行，可以提前处理一些全局性的逻辑。 -...
[JavaScript]移动端/解决scroll和touch事件的冲突/冒泡
对未知的一切抱有热忱
07-03 9762
假设有一个抽屉式菜单，根据手指的touch是会跟着动的，在面板任何地方右拉都会触发抽屉菜单的出现。 菜单隐藏的时候右边的内容是overflow:scroll的 这个时候滑动sroll的同时手指向右都会唤醒抽屉菜单，但是是不允许的。 其实按理来说右侧的面板内容如果一直不跳出文档流，也可能不需要额外处理，但是事实上由于嵌套各种position，导致尼玛一直冒泡，滚动松手只要有右滑迹象就会冒泡到深...
android 防止点击事件冒泡,移动端阻止事件冒泡需要注意！
weixin_33507838的博客
05-27 1014
移动端使用的js插件式zepto和touch，想要在一个大的区域做一个点击事件，但是里面小的区域也有自己的点击事件，就要阻止事件冒泡，但是使用了之后发现不好使，原因是：大的区域使用的事件是移动端的tap事件，小的区域是js动态生成的元素，使用的是onclick加载的函数，所以，阻止冒泡事件失败了，最后，把大的点击区域也换成了click进行处理，就好使了！zepto也是支持jquery的click事...
6.移动端事件--阻止冒泡
Kasekale的博客
10-14 5102
阻止文字被选中38.52
移动端冒泡的touch 事件挡也挡不住
simonyuan100的博客
11-07 4182
demo案例如下： body 有多个直接子元素，普通文档流布局，另一个直接子元素，满屏fixed定位，其内部也有多个子元素，一屏幕下显示不全，y轴滚动显示；该场景下，滚动fixed定位的内部元素，至底部后，Android机上fixed定位的元素回诡异的向上移动，带动body的直接子元素一起滚动。如图： touch 事件可以阻止默认 event.preventDefault ；如果加给紫色框，
移动端阻止事件冒泡需要注意！
weixin_30444105的博客
12-17 563
移动端使用的js插件式zepto和touch，想要在一个大的区域做一个点击事件，但是里面小的区域也有自己的点击事件，就要阻止事件冒泡，但是使用了之后发现不好使，原因是：大的区域使用的事件是移动端的tap事件，小的区域是js动态生成的元素，使用的是onclick加载的函数，所以，阻止冒泡事件失败了，最后，把大的点击区域也换成了click进行处理，就好使了！zepto也是支持jquery的click事...
牛客-前端布局与事件高频考点
04-03
牛客-前端布局与事件高频考点 前端布局是前端开发中一个非常重要的部分，掌握了前端布局的知识点，对于开发者来说是非常有帮助的。以下是前端布局和事件高频考点的知识点： 一、盒子模型宽度的计算 盒子模型是CSS...
移动端商城菜单左右各自滑动的窍门.zip
07-25
同时，JS还需要确保滑动过程中不会影响到其他元素，这涉及到事件阻止冒泡和捕获。 在压缩包中的 "index.html" 文件中，可以看到整个页面结构的布局，它通常会包含HTML5的结构标签，如 `<header>`、`<nav>`、`<main>...
微信小程序事件demo
04-14
4. **事件冒泡和事件捕获**：微信小程序支持事件冒泡和事件捕获两种事件传播方式。默认情况下，事件会按照从子组件到父组件的顺序逐级向上冒泡，直到遇到`Page`层为止。同时，也可以通过`catch<event-name>`来捕获...
JavaScript实现移动端弹窗后禁止滚动
10-15
`capture`属性设置为`true`，意味着在事件冒泡阶段之前捕获事件，从而尽早禁止页面滚动。 当`popupStatus`变为假（即弹窗关闭时），则移除事件监听器，恢复`document.body.style.overflow`为默认值，允许页面滚动。...
5.移动端事件--event 对象
Kasekale的博客
10-14 1340
事件函数中,默认的第一个参数是 Event对象target是 —–我们的元素对象
js 阻止事件捕获
weixin_34185560的博客
10-25 5795
1.支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数 useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用 attachEvent()方法，此方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于f...
【H5】 移动端的基本事件
舜岳的博客
06-15 5914
【H5】 移动端的基本事件： 一、基础事件 1、PC端事件 onclick 鼠标点击触发 onmousedown 鼠标按下触发 onmousemove 鼠标移动触发 onmouseup 鼠标抬起触发 2、移动端触屏事件 ontouchstart 手指按下触发 ontouchmove 手指移动触发 onTouchend 手指抬起触发 3、PC端事件和移动端事件的区别 通...
事件流、捕获阶段、冒泡阶段、移动端事件问题
girllan的博客
02-23 272
事件流、捕获阶段、冒泡阶段、移动端事件问题
彻底了解android view 事件机制中的“隧道”和“冒泡”
github_26939093的博客
04-11 3115
android view事件传递机制对不管是初学者还是有经验的开发者来说，都是一个比较核心的机制。可能说起事件分发机制，很多人都能立马就能说出dispatchTouchEvent(),onInterceptTouchEvent(),onTouchEvent()这三个回调方法,有些人甚至可能也会说出“隧道“，“冒泡“机制。诚然，android 的view事件分发机制确实离不开这三个方法，但是对于这三个
vue 如何阻止事件冒泡与设置捕获行为
热门推荐
weixin_44037017的博客
06-04 1万+
在vue中比如你给父元素设置了鼠标点击事件，父元素的儿砸也设置了点击事件，但是有时候点击了儿砸的事件但是父亲的事件也被触发了，这时候我们只想触发儿砸的点击事件，怎么办呢。 在JS中我们阻止事件冒泡与捕获时间是使用event.stopPropagation()的方法来阻止。 在vue中我们怎么阻止呢接下来我们来看在vue中怎么阻止冒泡与捕获事件的 请各位看下面代码 .stop 阻止冒泡事件 .cap...
理解事件捕获和事件冒泡
Hey firefly
04-03 6230
参考资料浅谈事件冒泡与事件捕获 一年前刚开始接触JavaScript的时候就看过有关事件冒泡和事件捕获的文章，但是当时只是看过了就是看过了，没有自己实际的实践，并没有什么自己的理解在里面，属于转眼就忘的那种状态，这段时间由于参加百度的ife前端培训，做到js方面的任务时，决定仔细的学习一下时间捕获和事件冒泡，所以就有了今天这篇文章。 ps：其实前两天就想写了，但无奈图书馆的网一直连不上，只好推到
给大家分享一个vue的移动端的事件项目
chuolvee4489的博客
07-17 695
给大家分享一个基于vue的移动端点击和长按事件库,项目于上周正式开源，今天来给大家分享一下 NPM github 码云 第一次加入开源分享的大军，请大家多多支持哦！觉得好的话，请大家给个Star vue-mb-touch vue-mb-touch 是一个vue的移动端的事件项目,内置了点击...
"深度剖析移动端javascript事件机制及兼容性
事件对象包含了与事件相关的一些信息，比如事件的类型、触发的元素、鼠标的位置等。通过事件对象，我们可以获取这些信息，并进行相应的处理。 最后，移动端开发中还涉及到一些移动特有的事件，比如触摸事件和手势...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值