阻止touch事件穿透

最新推荐文章于 2024-02-29 13:21:00 发布

CatalinaH

最新推荐文章于 2024-02-29 13:21:00 发布

阅读量1.9k

点赞数

分类专栏：前端开发常见问题文章标签：前端移动开发 touch穿透

本文链接：https://blog.csdn.net/CatalinaH/article/details/80322710

版权

前端开发常见问题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端移动开发常见的一个需求场景就是，点击页面的某一个区域，弹出一个全屏的浮层。

但当你滑动浮层内容，你会发现浮层下面的内容发生了滚动。

解决这种touch穿透要怎么做呢。

不要慌，核心代码就两行：

});

如果解决了你的问题，不要吝啬你的赞和鼓励，传播爱与能量，作者需要你们的鼓励！！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

CatalinaH

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

H5移动端点击事件穿透问题解决

AIGC大前端小王子

08-03

9580

最近有遇到前端事件点击穿透的问题，拿来跟大家分享一下。 1.问题描述：情景一：蒙层点击穿透问题，点击蒙层（mask）上的关闭按钮，蒙层消失后发现触发了按钮下面元素的click事件。情景二：跨页面点击穿透问题：如果按钮下面恰好是一个有href属性的a标签，那么页面就会发生跳转。情景三：另一种跨页面点击穿透问题：这次没有mask了，直接点击页内按钮跳转至新页，然后发现新页面中对应...

遮罩层事件穿透&完全禁止底部内容滑动(touch/app/wx/www)

xiongshiyuan的博客

08-18

3178

问题源自实践在touch和app端如果需要做一个嵌入的html页面，如果需要做弹窗的话一般需要使用一个遮罩层的，然后在遮罩层设计弹出窗的内容，一般弹出窗是active之后，底部的内容是需要完全静止的(数据更新除外哈),在遮罩上进行的操作不能渗透到底部去，这种情况一般体现在遮罩层滑动需要禁止底部内容滑动，这种情况我们一般的处理方法是在弹出事件中设置底部内容的over-flow：hidden，在关...

3 条评论您还未登录，请先登录后发表或查看评论

vue阻止触摸事件滚动穿透事件方法

可爱滴菜鸟

04-15

1335

触摸事件透过蒙层,改变了父组件的滚动条位置,添加这个就可阻止这一事件 @touchmove.prevent

屏蔽触摸事件

forestsenlin的博客

12-25

692

在开发中，有时需要A Layer响应触摸，而B Layer不响应触摸，如果A Layer添加触摸事件监听，而B Layer不添加那么可以实现这个需求。但是如果A、B都需要响应触摸，但在某些时候只要求A响应B不响应，那么可以在A、B之间添加一个屏蔽了触摸事件的C Layer，这个Layer和A、B有同一个父节点，ZOrder在A之下B之上，那么A监听到了触摸之后，C屏蔽了触摸，B就监听不到触摸了。使用

js阻止事件传播/穿透（冒泡和捕获）

w_____w_____的博客

11-18

8550

阻止事件传播 //代码1 //在下面的代码中，我需要添加一个全局事件，但是改全局事件不能包括imitationSelect， imitationSelect.onclick= function(){ if(selectUl.style.display=="block"){ selectUl.style.display='none'; }else{ selectUl.style.display='block'; }

阻止点击事件穿透实现点击穿透

weixin_45902429的博客

04-14

5808

一、阻止点击穿透，上层点击时加上下面这句，阻止事件冒泡到父元素 event.stopPropagation(); 二、点击穿透到下面一层，不点击上层，为上层添加下面样式代码即可 pointer-events: none;

阻止手机端手指触摸事件（单指）

dk8600的博客

03-01

361

var obj = document.getElementById('pDiv'); obj.addEventListener('touchmove', function(event) { // if finger one touched if (event.targetTouches.length == 1) ...

触摸事件的拦截机制

S244049619的博客

05-17

230

@Override public boolean onInterceptTouchEvent(MotionEvent ev) { switch (ev.getAction()) { case MotionEvent.ACTION_DOWN: downX = (int) ev.getX(); break; case MotionEv

CocosCreator 事件阻挡和事件穿透

gamedaybyday

11-12

5130

版本：2.4.3 事件阻挡如下图，现在实现只让白色响应事件，不让红色响应事件。(注意层级关系，红色包含着白色) 给红色和白色添加点击事件 this.white.on(cc.Node.EventType.TOUCH_END, ()=>{console.log("white click")},this); this.red.on(cc.Node.EventType.TOUCH_...

移动端事件穿透的原理与解决方案.docx

10-26

### 移动端事件穿透的原理与解决方案随着移动设备的普及和技术的发展，移动互联网迎来了前所未的高度发展期，这也促使越来越多的开发者投入到移动应用的开发之中。而在移动应用的开发过程中，一个常见的问题是...

怎样阻止页面滚动穿透

一只大海

11-21

2941

在前端的开发中，经常会遇到长页面和弹框，触发弹框，会出现遮罩层后面的页面依旧可以滚动，此时就出现了滚动穿透，如何处理呢？解决方法：触发弹框时，给最外层的div添加样式话不多说，上代码 .prevent_touch_move_box { position: fixed ; overflow: hidden; width: 100%; height: 100%; top: ...

阻止事件穿透的多个方法，总有一个能解决你的问题

qq_41806475的博客

06-11

4646

<div class="outBox" @click.stop="toDetail"> 最外层box <div class="middleBox"> 中间的box <div class="insetBox" @click.stop="toMes"> 最里面的box--点击跳转 </div> </div> </div> 在实际开发中，有时候在事件后面加stop修饰符，并不管用；那么我们可以通过给里面的box.

前端事件可穿透与禁止穿透

Talljack 的博客园

12-21

2032

如何处理偶然出现的事件透传问题？如何为了美观UI而允许事件透传？一文告诉你如何快速解决问题。

移动端点透事件原理及阻止 touch click

AdleyTales的技术博客

01-02

3788

什么条件发生点透 A z-index大于B，即A显示在B浮层之上 A发生touch， A touch后立即消失， B事件绑定click 点透事件发生的原理当手指触摸到屏幕的时候，系统生成两个事件，一个是touch 一个是click，touch先执行，touch执行完成后，A从文档树上面消失了，而且由于移动端click还有延迟200-300ms的关系，当系统要触发click的时候，发现在用户点...

Javascript中怎样阻止事件传播？

金木编程

05-17

1113

需要注意的是，event.stopPropagation()只能阻止事件在事件流中的传播，但无法阻止事件的默认行为。该方法可以在事件处理程序中调用，以阻止事件从当前元素向上级元素进行冒泡传播，或阻止事件从捕获阶段向下级元素进行捕获传播。上述示例中的事件处理程序阻止了事件的冒泡传播并取消了事件的默认行为。在上述示例中，当childElement元素被点击时，子元素的点击事件处理程序中的event.stopPropagation()会阻止事件继续向上级元素传播，因此父元素的点击事件处理程序不会执行。

如何阻止点击穿透及其应用

kwroi的博客

02-09

1066

点击穿透参考https://blog.csdn.net/qq_61233877/article/details/124868903

解决移动端滚动穿透的6种方法，经常发生在弹出遮罩层内容滚动，下面页面也滚动的情况

最新发布

男神的专栏

02-29

2429

这时，我们可以通过记录用户打开弹窗前所滚动页面的位置，在弹层展开的时候赋给body在css中的top值，等关闭弹层的时候，再把这个值赋值给body在js中的scrollTop值，还原body的滚动位置。2、touchmove手势移动的时候，再次获取最新的坐标点y的值y2，（其实记录可滚动区域的可滚动高度、当前滚动距离等可以在一开始就记录，我这里写到了touchmove里，还可以再优化）。当弹层出现的时候不需要再禁掉body的滚动效果了，我们可以从弹层方面入手，阻止弹框的touchmove事件的默认行为。

Javascript怎样阻止事件传播？

金木编程

08-08

951

调用该方法不仅会停止事件在当前元素上的传播，还会阻止其他相同类型的事件继续触发。1、event.stopPropagation()：调用该方法可以阻止事件在当前元素上继续传播，无论是在捕获阶段还是冒泡阶段。如果事件在捕获阶段触发，调用这个方法会阻止它进入冒泡阶段，从而不影响父元素及其祖先元素。如果在同一个元素上有多个事件处理函数，调用这个方法只会阻止事件传播，但不会影响其他处理函数的执行。事件传播指的是当一个元素上触发了一个事件，该事件会在事件流中传播到父元素或祖先元素，从而影响到它们。

JS中如何阻止事件的传播

webchang的博客

03-24

8850

使用stopPropagation和stopImmediatePropagation阻止事件的传播

touch事件阻止事件冒泡的方法

08-08

在浏览器中，可以通过以下方法阻止touch事件的冒泡： 1. 使用stopPropagation()方法：在触摸事件处理程序中，调用事件对象的stopPropagation()方法可以阻止事件冒泡。例如： ```javascript element.addEventListener('touchstart', function(event) { event.stopPropagation(); // 其他处理逻辑 }); ``` 2. 使用preventDefault()方法：在触摸事件处理程序中，调用事件对象的preventDefault()方法可以阻止默认行为和事件冒泡。例如： ```javascript element.addEventListener('touchstart', function(event) { event.preventDefault(); // 其他处理逻辑 }); ``` 3. 使用return false：在触摸事件处理程序中，返回false也可以阻止事件冒泡。例如： ```javascript element.addEventListener('touchstart', function(event) { // 其他处理逻辑 return false; }); ``` 需要注意的是，以上方法只能阻止当前事件的冒泡，而无法阻止其它事件的冒泡。如果想要完全禁止事件冒泡，可以在触摸事件处理程序中同时使用stopPropagation()和preventDefault()方法。