ios 事件穿透的原因和解决方法

最新推荐文章于 2023-05-28 18:33:50 发布
原创 最新推荐文章于 2023-05-28 18:33:50 发布 · 4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ios #事件穿透

本文探讨了半透明视图导致的点击穿透问题，并提出了解决方案：通过调整半透明视图的点击区域来避免事件穿透现象，确保点击事件正确响应。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

由于任务需要  有时候界面需求要一个半透明的视图  这样,你可以看见下一个视图 ,点击的时候,有可能就直接点击到底层视图  导致底层视图做出响应,而半透明的视图纹丝不动,其实造成这种原因最主要的一个原因就是半透明视图的点击区域问题 , 可以说是半透明视图的点击区域超过了他的farme,这是造成时间穿透的真正原因,,解决事件穿透,只要你把它的点击区域扩大就行了 这样就不会出现点击穿透 

http://www.jianshu.com/p/0bece5f27650

iOS事件穿透
小天空的博客
11-19 871
参考:简书-事件穿透<p>坐标转换 appDelegate.mAboveButton.h - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // Override point for customization after application launch. self.window = ..
ios 事件穿透
jason的个人博客
06-19 1027
事件的穿透
iOS 使点击事件穿透透明的UIView
weixin_30276935的博客
10-07 674
通过实例讲解，如图(三个深灰色按钮处于同一个contentView中)： 悬浮的三个按钮下方有一个可以点击的灰色区域，但是点击按钮之间的透明区域， 这三个按钮的contentView会响应这个点击事件，这时候需要让这个contentView不响应这个点击事件。 解决方法如下(将此方法增加到这个contentView类中即可)： ...
ios滚动穿透问题的两个解决方案
m0_37728716的博客
04-11 3116
1、当触摸元素有-webkit-overflow-scrolling样式时，若触摸元素有滚动条，则不会发生滚动穿透，若触摸元素无滚动条，则touchmove事件依然会穿透至视图下层带有-webkit-overflow-scrolling的元素上。一般弹框是这种情况，这也是需要主要处理情况，而且这并不是由事件穿透造成的bug，所以阻止事件传播并没有用。 2、当触摸元素无-webkit-overfl...
移动端滑动穿透事件，支持ios、Android
zeng092210的博客
01-23 3898
直奔主题，这两天我负责开发的app内容遇到了一个问题：弹框底层页面还是能滑动问题（在Android和ios12系统一下是正常的，ios高版本可滑动）也就是我们所说的滑动穿透事件           我遇到的两种情况： 第一种：如图（当弹框中内容不需要滑动） 遇到这种情况网上一顿找，看看是什么原因造成的。说简单点就是滑动穿透事件造成 滑动穿透事件：有一层遮罩蒙层覆盖在body上时，当我们...
解决ios或安卓手机微信上下拖动页面出现穿透（橡皮筋现象）
11-17
总结来说，解决iOS和Android手机上的"橡皮筋现象"穿透问题需要深入理解平台的滚动机制，调整布局和交互设置。通过细致的代码审查和测试，开发者可以确保用户在滑动页面时获得平滑无碍的体验，从而提升应用的整体质量...
vue-解决弹出蒙层滑动穿透问题（IOS穿透）
hahahhahahahha123456的博客
08-07 1761
【实现思路】 　　1. vue提供的@touchmove.prevent可以用来阻止滑动，但是这个方法会对其内的子div的滑动事件也禁止掉了，这样会导致中间文字无法滑动。如果没有中间滑动需求，用@touchmove.prevent实现是一个很好的方法。 　　2. 蒙层设为fixed悬浮在最上，底部列表设置overflow-y: hidden；这样可以列表内容就不可以滑了，但实际过程中没有效果，于是想到继续往列表父div向上追溯，对body和html标签设置相关样式，这样就控制住了底部列表滑动问题...
举例讲解iOS应用开发中hitTest触摸事件的编写方法
09-02
通过重写 `hitTest:withEvent:` 和触摸事件处理方法，我们可以精确控制触摸事件的流向，确保视图层次结构中的每个元素都能按照预期响应用户的触摸操作。这种自定义处理方式对于构建复杂交互的 iOS 应用程序至关重要...
解决微信小程序中的滚动穿透问题
12-13
总之，解决微信小程序中的滚动穿透问题，关键在于阻止不必要的滚动事件，并根据实际场景灵活调整元素的定位和滚动行为。通过这种方式，可以显著提升用户体验，避免内容在不应滚动时产生滚动现象。对于遇到此类问题的...
imageView点击穿透事件示例
09-08
imageView 点击穿透 根据图片的透明度判断点击位置
ionic 手机app iphone手机点击穿透问题的解决
web0718h5的博客
07-20 642
在开发APP过程中，由于我们有一部分页面是挂在站点上的。首次加载不存在点透的问题。首次加载之后，在点击跳转，会直接出发下以页面的click事件，到是连续跳转。              出发点透的事件是 on-tap事件 。这种点透属于跨页面点透。解决方案是：在触发点透的变迁上添加属性。 解决方案 ：                      data-tap-di
解决ios弹出层滚动穿透
youngeffort的博客
07-09 4056
现象：h5页面的弹出层在ios中滚动会触发底层页面的滚动 原因：touchmove事件的默认行为未阻止 解决：阻止touchmove事件的默认行为 vue代码如下：popupVisible（type：Boolean）变量控制弹出层 watch: { // 如果 `question` 发生改变，这个函数就会运行 popupVisible(newQuestion, oldQu...
UIView 响应链 点击穿透 捕获
05-28 321
https://www.jianshu.com/p/f6aff12fc08buiview - Event handling for iOS - how hitTest:withEvent: and pointInside:withEvent: are related? - Stack Overflow
滚动穿透及IOS惯性滚动究极解决方案
qq_36545095的博客
04-01 1256
滚动穿透及IOS惯性滚动究极解决方案
touch事件 以及 点击穿透的三种解决方法(移动端)
weixin_46022934的博客
11-14 5604
移动端 touch事件以及touch事件点击穿透的解决方法 提示： touchstart—>touchmove—>touchend ----> click 上面的四种点击都可以在移动端进行使用!但是有明确的区别! 移动端:touchstart — touchmove — touchend ,三个事件是专门为移动端监测,触摸开始(按下),触摸移动,触摸结束(离开),三个事件. 文章目录移动端 touch事件以及touch事件点击穿透的解决方法前言一、touch事件1.touchstart-
iOS之事件穿透
weixin_33884611的博客
08-23 434
前言 小伙伴们在开发中是否遇到过这样的需求呢，一个控件的某个部分被另外一个控件遮挡住，当点击这个重叠部分时，需要响应被遮盖控件的点击事件，就如下图所示   当我们点击区域3时，响应蓝色按钮的点击事件，点击区域1和2时，响应红色按钮的点击事件，对于区域1和3没什么好说的，那如何让红色按钮响应区域2的点击呢？这就是笔者今天要讲的内容。 事件传递 大家应该都知道，事...
解决ios滑动穿透问题
lzc的博客
12-16 4786
function closest(el, selector) { const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector; while (el) { if (matchesSelector.call(el, sel...
H5移动端点击事件穿透问题解决
拥抱AI Design
08-03 9796
最近有遇到前端事件点击穿透的问题，拿来跟大家分享一下。 1.问题描述： 情景一：蒙层点击穿透问题，点击蒙层（mask）上的关闭按钮，蒙层消失后发现触发了按钮下面元素的click事件。 情景二：跨页面点击穿透问题：如果按钮下面恰好是一个有href属性的a标签，那么页面就会发生跳转。 情景三：另一种跨页面点击穿透问题：这次没有mask了，直接点击页内按钮跳转至新页，然后发现新页面中对应...
ios系统遮罩层事件穿透
最新发布
06-24
### iOS 遮罩层事件穿透解决方案 在iOS系统中，遮罩层事件穿透问题通常表现为用户在点击或滑动遮罩层时，触发了遮罩层下方的内容。以下是几种常见的解决方法： 1. **通过JavaScript阻止默认行为和事件冒泡** 可以监听`touchmove`事件，并在事件处理函数中调用`event.preventDefault()`和`event.stopPropagation()`来阻止默认行为和事件冒泡。这种方法适用于需要完全禁用遮罩层下方滚动的场景[^1]。 ```javascript window.addEventListener('touchmove', (event) => { var e = event || window.event; e.preventDefault(); e.stopPropagation(); }, { passive: false }); ``` 2. **使用CSS属性`touch-action`** 为遮罩层设置`touch-action: none;`样式可以有效阻止触摸事件传递到遮罩层下方的内容。这种方法简单且高效，尤其适合组件化开发场景[^2]。 ```css .overlay { touch-action: none; } ``` 3. **通过Vue自定义指令控制页面滚动** 在Vue项目中，可以通过自定义指令实现遮罩层显示时锁定页面滚动的效果。具体做法是当遮罩层显示时，将`body`元素的`position`设置为`fixed`，并记录当前滚动位置；当遮罩层隐藏时，恢复`body`的样式和滚动位置[^4]。 ```javascript Vue.directive('fixed', { inserted() { let scrollTop = document.body.scrollTop || document.documentElement.scrollTop; document.body.style.cssText += 'position:fixed;width:100%;top:-' + scrollTop + 'px;'; }, unbind() { let body = document.body; body.style.position = ''; let top = body.style.top; document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top); body.style.top = ''; } }); ``` 4. **调整DOM结构避免滚动穿透** 如果页面中存在`position: fixed`的元素嵌套在`scroll-view`中，可能会导致滚动穿透问题。将这些固定定位的元素移动到`scroll-view`外部，或者为它们添加`catch`属性，可以避免滚动穿透[^3]。 5. **结合`overscroll-behavior`优化滚动体验** 对于需要滚动的内容区域，可以通过设置`overscroll-behavior: none;`来防止滚动溢出行为影响其他内容。同时，确保内容区域的高度固定且允许垂直滚动[^2]。 ```css .scrollable-content { height: 500rpx; overflow-y: scroll; overscroll-behavior: none; } ``` 以上方法可以根据实际需求选择合适的方案进行实现。如果项目使用的是Vue框架，推荐优先考虑自定义指令的方式，因为它能够很好地与Vue的生命周期集成；如果是原生开发，可以直接通过CSS或JavaScript实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值