移动端H5点击穿透事件

已于 2024-06-30 09:52:16 修改
阅读量164 收藏
点赞数 2
文章标签： vue.js javascript 前端
于 2024-06-29 18:23:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43235503/article/details/140068362
版权

在移动端中两个元素上下堆叠的时候，一个绑定click事件，另一个绑定touchstart事件，点击上面元素使其移开或消失时，也会触发下面元素的事件；
解决方法：

（1）两个元素都使用相同的事件；

（2）使用插件来解决；

前端小凯
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
H5移动端点击事件穿透问题解决
AIGC大前端小王子
08-03 9571
最近有遇到前端事件点击穿透的问题，拿来跟大家分享一下。 1.问题描述： 情景一：蒙层点击穿透问题，点击蒙层（mask）上的关闭按钮，蒙层消失后发现触发了按钮下面元素的click事件。 情景二：跨页面点击穿透问题：如果按钮下面恰好是一个有href属性的a标签，那么页面就会发生跳转。 情景三：另一种跨页面点击穿透问题：这次没有mask了，直接点击页内按钮跳转至新页，然后发现新页面中对应...
移动端H5常见问题以及解决方案
bufanweb的博客
07-16 1377
移动端H5常见问题以及解决方案 问题 下面列举了我遇到的一些常规问题,如有遇到其他问题的请在评论区补充,之后我也会实践加以补充,感谢! 以下解决方案,均经过我测试成功,健康安全,请放下食用.由于篇幅问题,某些非核心的解决方案的实现细节暂未谈论,需要的自行研究. 1.iOS滑动不流畅 表现 上下滑动页面会产生卡顿,手指离开页面,页面立即停止运动.整体表现就是滑动不流畅,没有滑动惯性. 产生原因 为什么在iOS的webview中滑动不流畅,它是如何定义的?* 最终我在safari文档里面寻找到了答案(文
移动端点击穿透问题
weixin_47450807的博客
02-16 1924
一、前言 我们在上篇博客中了解到移动端点击事件存在延迟问题，我们可以通过一些措施，来解决300ms延迟问题。此时我们想一下，click事件存在延时300ms问题，我们在移动端使用touchstart事件来监听不可以解决吗? 移动端的touchstart事件也存在一些弊端： 1、如果我们想要滑动手机屏幕，但是此时也是会触摸到手机，从而触发touchstart事件 2.、touchstart事件存在点击穿透的问题。 二、什么是点击穿透 如果我们存在两个元素A,B，此时元素B在元素A的上层，我们监听元素B的tou
移动端的点击穿透问题
yiyueqinghui的博客
11-30 1342
1、概况 说完移动端点击300ms延迟的问题，还不得不提一下移动端点击穿透的问题。可能有人会想,既然cick点击有300ms的延迟，那对于触摸屏，我们直接监听 touchstart事件不就好了吗? 使用 touchstart去代替click事件有两个不好的地方。 1、touchstart昰指触摸屏幕就触发，有时候用户只是想滑动屏幕，却触发了 touchstart事件，这不是我们想要的结果。 2、使用 touchstart事件在某些场景下可能会出现点击穿透的现象。 什么是点击穿透? 假如页面上有两个元素A
移动端点击穿透问题详解：
weixin_45376220的博客
09-22 1080
1.点击穿透bug 事件机制：动作，监听 动作每时每刻都会发生，只要用户点击，就会发生在动作。监听了这个动作才能执行我们的代码，不监听就是白点。click就是动作模拟出来的，当用户进行触摸后，浏览器300ms后就会模拟click这个动作，就算不监听，触摸后也会模拟。 总之，不管监听不监听，动作都会发生。鼠标事件在移动端是被模拟的，在发生触摸这个动作之后，等300ms后模拟的。 超链接和button...
Vue.js 移动端 Web App 点击穿透问题解决方案
weixin_34313182的博客
05-18 200
描述在近期的一个移动端项目中，有一个页面需要有弹框提示，并且这个弹框通过关闭按钮关闭。页面当中使用了 iScroll 来实现页面局部滚动，在 iScroll 的配置当中把tap和click事件都开启了。代码如下：this.myScroll=newIScroll(this.$refs.wrapper,{mouseWheel:true,click:tr...
移动端H5常见问题合集
05-30
禁止点击穿透 禁止滑动穿透 支持往返刷新 解析有效日期 修复高度坍塌 修复输入监听 简化回到顶部 简化懒性加载 优化扫码识别 自动播放媒体 调用系统功能 忽略自动识别 弹出数字键盘 唤醒原生应用 禁止页面缩放 禁止...
移动端H5调试工具
android_xiaobai1的博客
09-02 1025
前端日记 由于工作调动，很久没写日记了，这次想起来继续写。一个前端小白的学习之路。 移动端H5调试工具分享 由于工作原因，我们经常在处于内网的环境下开发，开发PC还比较好，能用Chrome DevTool （简称F12）进行调试，那么如果是移动端呢？ 方法1. 使用同一网段， 只要手机连接同一网段的wifi，然后使用ip那个网址访问那是可以的。 方法2. 也是本次介绍的重点。 localtunnel 通过localtunnel就能把你的本地地址映射到一个公网地址，比如我本地地址localhost:8002
移动端H5页面关于软键盘的一些踩坑记录
this_ITBoy的博客
08-27 4515
最近一个项目需要做一个留言的功能，需求很简单，点击留言按钮底部弹出留言框，然后发送留言给后台就行了，还有一个就是页面要实现复制功能。讨论需求的时候我预想到了手机上软键盘的弹出可能会有一些bug，不过需求比较急，就想着先做完再来改呗。很快做完之后，在电脑上测了没毛病，提测之后，bug刷刷的就来了： 1、手机ios或者Android微信，点击留言弹出输入框，点击完成或者收起按钮，或者安卓手机点击自带...
移动端 点击穿透
qq_38110067的博客
07-11 138
场景：模态框中的按钮。模态框中A按钮，下方还存在B按钮，此时点击模态框中的按钮，关闭模态框，会发现B按钮也触发了. 原因：当用户手指触摸A按钮的时候，会产生两个事件，touch和click.当触发touch的时候，模态框关闭，click 会在200-300ms后发生，所以B按钮也触发了。 解决方案：不要用click事件，都用tap事件就OK了 ...
移动端点击穿透问题以及解决方法
2301_76794950的博客
06-17 759
fastclick取消click事件300ms延迟的原理: fastclick监听了click事件的触发, 当body上触发了click事件时, fastclick会自定义一个事件,并立即触发, 并把监听到的系统click事件阻止掉。由于移动设备的物理特性导致的。物理上，当用户在触摸屏幕时，设备需要时间来判断用户是要单击、双击或长按以及响应相应的事件，因此会存在一个300ms短暂的延迟。运行点击上层元素只触发了top元素的事件，解决了手势穿透的问题。可以看到上层top盒子关闭的同时触发了下面的点击事件。
移动端点击与点击穿透
(づ｡◕‿‿◕｡)づgigi奋斗在前端和刷题中╮(╯﹏╰)╭
08-24 1906
移动端click事件的300ms延迟由于移动端会有双击缩放的这个操作，因此浏览器在click之后要等待300ms，看用户有没有下一次点击，也就是这次操作是不是双击。解决方案： 浏览器开发商 如果在meta中设置了禁止缩放： <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scaleble = no" />表明这
移动端点击穿透之谜
flying meng的菜鸟居
12-05 2253
依然先说结论：目前为止所有的点击问题都是移动端事件触发顺序混乱导致的！ 关于捕获和冒泡→ 我们首先要知道的是：当我们鼠标按下一个按钮时，并不是“点击了一个按钮”，而是在这个区域内，鼠标（上的按键）被按下，操作系统和浏览器把这个信息对应到了“按钮”所在区域并触发其逻辑。 事实上鼠标点击并没有位置信息，是操作系统一直在监听鼠标移动，根据累积的位移计算出来的坐标，将其传给浏览器。 那么，把这个坐标转换为具体的元素上的事件的过程，就可称作“捕获”。那“冒泡”呢？这个不好直观解释，但有一点想必你是明白的：当你按下电视
移动端 总是点击两次 点击穿透
hao像飘在外太空的博客
08-17 1114
Augest 17thAugest 16thtouch之后300ms会自动触发click事件，很诡异 全局禁止touch之后的click事件 window.addEventListener("touchstart", function(e){ e.preventDefault(); });angular获取DOM元素var element=angular.element(document
由移动端页面点击穿透想到的
weixin_33851429的博客
07-24 80
原文链接http://ymblog.net/2016/03/28/由移动端页面点击穿透想到的/ 首先我想到了哪些： 点击穿透是如何引起的 如何解决 什么是事件模拟 一、点击穿透是如何引起的？ 可能是由click事件的延迟或者事件冒泡导致，事件包含touchstart/touchmove/touchend/mousedown/mousemove/mouseup/click。...
【移动端】点击穿透 的五种解决方法
马云
01-16 3734
文章目录什么是点击穿透解决方法方法一方法二方法三（建议使用）方法四方法五 什么是点击穿透 在触发完touchstart事件的时候紧接着触发他父级元素的click事件 具体来看以下例子来了解什么是点击穿透： 在点击关闭按钮后关闭遮罩层并产生了点击穿透问题 以下是源码： <script src="https://cdn.bootcss.com/holder/2.9.6/holder.min.js"></script> <div class="gap"></d
html5 移动端 滚动穿透 点击穿透 几种方案
愿你走过半生，归来任是少年。
04-22 8654
在移动端页面上，当有 fixed 遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下面的内容，这就是臭名昭著的滚动穿透问题 解决方法一： css之overflow:hidden html, body { overflow: auto; height: 100%; } 使用这种方法时，在与饿了么前端 mint-ui 组件库中的 Infinite scroll ...
移动端点击延迟问题和点击穿透事件
张梦莹的博客
08-22 736
当我们在做移动端页面是会发现当我们点击一个元素触发事件的时候，会存在一个短暂的延迟问题。在就是所谓的移动端300ms延时。 具体的解决方案： 我们可以使用touchstart事件，然后去监听这个事件的触发，这个时间是不存在延时问题的。此时还需要我们去禁止掉click事件，因为会存在点击穿透的问题。 那什么又是点击穿透事件呢？ 当我们页面有两个元素A，B。当我们触发A的touchstart事...
vue2 移动端h5
最新发布
03-16
Vue.js是一种流行的JavaScript框架，用于构建用户界面。它具有简洁的语法和响应式数据绑定的特性，使得开发者可以更轻松地构建交互性强的移动端H5应用。 Vue.js的移动端H5开发主要依赖于Vue的核心库和Vue Router路由库。以下是Vue.js移动端H5开发的一般步骤： 1. 安装Vue.js：使用npm或者CDN方式安装Vue.js，可以通过命令行或者在HTML文件中引入Vue.js。 2. 创建Vue实例：在JavaScript文件中创建一个Vue实例，通过el选项指定挂载点，data选项定义数据，methods选项定义方法等。 3. 编写模板：使用Vue的模板语法编写HTML模板，可以在模板中使用Vue实例中定义的数据和方法。 4. 添加样式：使用CSS样式为应用添加样式，可以使用第三方CSS库或者自定义样式。 5. 添加交互：通过Vue的指令和事件绑定等方式为应用添加交互功能，例如点击事件、表单验证等。 6. 添加路由：使用Vue Router库来实现页面之间的跳转和路由管理，可以通过配置路由表来定义不同路径对应的组件。 7. 打包部署：使用打包工具（如Webpack）将代码打包成可部署的静态文件，然后将静态文件部署到服务器上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值