ios下按钮click事件点击穿透问题
和app进行混合开发的时候,一个页面使用h5写的,按钮上绑定click事件会触发下面图片上的a链接导致跳转,页面如图

顶部是一个banner,分vr、视频、图片三部分,红框处的三个nav按钮绑定click事件使banner滚动到响应的部分,banner上有a链接用以跳转详情,nav按钮上绑定事件如下:
$(document).on("click","#banner-navBox .nav-btn",function(e){
...
});
但是点击nav按钮的时候看不到banner滚动而是直接触发下面banner上的a链接发生跳转。
查阅资料发现移动端click事件的流程:touchstart -> touchend -> tap -> click。
touchend首先触发tap然后等待300ms后触发click。
想的是nav按钮绑定click事件会先触发touchend 事件,而移动端a链接的触发机制就是touchend ,所以就导致先发生了页面跳转。所以nav按钮绑定的时间改为touchend并阻止默认行为后完美解决,如下:
$(document).on("touchend","#banner-navBox .nav-btn",function(e){
e.preventDefault();
...
}
ios下按钮click事件点击穿透问题的更多相关文章
- IOS下自定义click事件使用alert引发的血案
使用过iscroll插件的同学都知道iscroll支持自定义事件,即在调用iscroll时参数赋值options.click = true. 接下来定义事件如: $clinicAppoint.on(' ...
- IOS下的 click 点击失效
当委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效. demo: & ...
- 移除IOS下按钮的原生样式
写WAP页面的时候 一定要加上这组样式,以避免在IOS下面按钮被系统原生样式影响 input,textarea {outline-style:none;-webkit-appearance:none ...
- ios微信浏览器click事件不起作用的解决方法
$(document).on( "click", ".weui_cell", function (event) {alert(); }); JS代码是这样的,h ...
- ASP。net中如何在一个按钮click事件中调用另一个按钮的click事件
方法一: 直接指定 事件<asp:Button ID="btn1" runat="server" Text="按钮1" onclick ...
- GridControl控件添加按钮列及在按钮Click事件中得到行数据 zt
在GridControl中添加按钮列的步骤如下: 1. 把列的ColumnEdit属性设置为RepositoryItemButtonEdit 2. 把TextEditStyle属性设置为HideTex ...
- 在MVVM模式中,按钮Click事件的绑定方法
在MVVM模式中,我们将Button的方法写到ViewModel中,然后绑定到前端界面.通常的做法是写一个类,继承ICommand接口,然而如果按钮比较多的话,就需要写很多的类,对于后期维护造成很大的 ...
- document.onclick在ios上不触发的解决方法与touchstart点击穿透处理
document.onclick = function (e) { var e = e ? e : window.event; var tar = e.srcElement || e.target; ...
- 关于移动端的Click事件
在移动端执行Click事件,通常情况出现有300毫秒的延迟,为防止这种不必要的延迟效果,我们可以换种方式来实现,同样达到快速执行Click事件的效果. 先了解一下移动端Click的执行顺序: touc ...
随机推荐
- Docker容器(五)——Docker静态化IP
(1).Docker的四种网络模式 Docker有以下四种模式,通过--net=[参数]选项(现在也可以使用--network [参数])指定: host模式:使用宿主机的IP地址和端口.使用--ne ...
- pytorch中调整学习率的lr_scheduler机制
有的时候需要我们通过一定机制来调整学习率,这个时候可以借助于torch.optim.lr_scheduler类来进行调整:一般地有下面两种调整策略:(通过两个例子来展示一下) 两种机制:LambdaL ...
- yaml文件实例:nginx+ingress
[root@lab3 nginx]# cat nginx-test.yaml apiVersion: extensions/v1beta1 kind: Deployment metadata: nam ...
- DNS解析问题
DNS解析问题,在/etc/resolv.conf文件中加如下一行: nameserver 8.8.8.8 即使用谷歌的域名服务器 如下问题都是DNS解析问题: apt-get update 异常 T ...
- PNG压缩工具-PNGGauntlet
PNGGauntlet下载地址 对于前端来说非常实用的PNG压缩软件,支持拖拽,就是软件速度比较慢.
- 2019年Java面试题基础系列228道(6)
51.ArrayList 与 LinkedList 的不区别? 最明显的区别是 ArrrayList 底层的数据结构是数组,支持随机访问,而LinkedList 的底层数据结构书链表,不支持随机访问. ...
- Cannot assign requested address的解决办法
今天想试一下redis,写了个程序,对redis连续进行100000访问,却出现以了Cannot assign requested address的问题,我起先是以为是redis的问题(可能承受不了这 ...
- [转帖]新iPhone的黑科技:UWB技术揭秘
新iPhone的黑科技:UWB技术揭秘 http://blog.nsfocus.net/iphone-black-technology-uwb-technology-revealed/ 阅读: ...
- [转帖]nginx基础整理
nginx基础整理 https://www.cnblogs.com/guigujun/p/6588545.html 目录结构如下: Nginx基础知识 Nginx HTTP服务器的特色及优点 Ngin ...
- QT 读写.ini配置文件
当需要存放的数据量较少时合适使用.ini配置文件. #include <QCoreApplication> #include <QSettings> void SystemSe ...