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 ...
随机推荐
- 【438】Python 处理文件
1. 读取文件,计算 tweets 数目 python中readline判断文件读取结束的方法 line == '' python:如何检查一行是否为空行 line == '\n' or line = ...
- LeetCode_392. Is Subsequence
392. Is Subsequence Easy Given a string s and a string t, check if s is subsequence of t. You may as ...
- EC11编码器的使用方法
1. EC11编码器的原理图如下 2. 旋转的时候,波形如下,EC11转1格,产生一个上升沿的中断,思路就是检测AX4-1的上升沿中断(平时是低电平),进入中断服务函数,检测AX4-2的电平,低电平逆 ...
- AI - TensorFlow - 示例05:保存和恢复模型
保存和恢复模型(Save and restore models) 官网示例:https://www.tensorflow.org/tutorials/keras/save_and_restore_mo ...
- 向多个git仓库提交
查看所有远程仓库 为了不用每次输密码,可以先配置ssh key 查看 添加远程仓库 git remote add origin1 git@other:YYYYYYYYYY/AA.git 向新的代码仓库 ...
- Configuring and Running Django + Celery in Docker Containers
Configuring and Running Django + Celery in Docker Containers Justyna Ilczuk Oct 25, 2016 0 Commen ...
- canal启动报错ERROR c.a.o.canal.parse.inbound.mysql.dbsync.DirectLogFetcher - I/O error while reading from client socket
- 2019年春季学期《C语言程序设计II》课程总结
2019年春季学期<C语言程序设计II>课程总结 1.课程情况 教学内容 课堂小结 作业安排 优秀作业 备注 1.开学谈心 2.测验数据类型.运算符与表达式的自学情况,并讲解测验题目3.第 ...
- PHP强制在微信中打开
if (!Func::isWx()) { exit('请在微信客户端打开链接'); } // 判断是否是微信 public static function isWx() { if ( strpos($ ...
- vue之$event获取当前元素的节点
<p @click = “clickfun($event)”>点击</p> methods: { clickfun(e) { // e.target 是你当前点击的元素 // ...