和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事件点击穿透问题的更多相关文章

  1. IOS下自定义click事件使用alert引发的血案

    使用过iscroll插件的同学都知道iscroll支持自定义事件,即在调用iscroll时参数赋值options.click = true. 接下来定义事件如: $clinicAppoint.on(' ...

  2. IOS下的 click 点击失效

    当委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效. demo: & ...

  3. 移除IOS下按钮的原生样式

    写WAP页面的时候  一定要加上这组样式,以避免在IOS下面按钮被系统原生样式影响 input,textarea {outline-style:none;-webkit-appearance:none ...

  4. ios微信浏览器click事件不起作用的解决方法

    $(document).on( "click", ".weui_cell", function (event) {alert(); }); JS代码是这样的,h ...

  5. ASP。net中如何在一个按钮click事件中调用另一个按钮的click事件

    方法一: 直接指定 事件<asp:Button ID="btn1" runat="server" Text="按钮1" onclick ...

  6. GridControl控件添加按钮列及在按钮Click事件中得到行数据 zt

    在GridControl中添加按钮列的步骤如下: 1. 把列的ColumnEdit属性设置为RepositoryItemButtonEdit 2. 把TextEditStyle属性设置为HideTex ...

  7. 在MVVM模式中,按钮Click事件的绑定方法

    在MVVM模式中,我们将Button的方法写到ViewModel中,然后绑定到前端界面.通常的做法是写一个类,继承ICommand接口,然而如果按钮比较多的话,就需要写很多的类,对于后期维护造成很大的 ...

  8. document.onclick在ios上不触发的解决方法与touchstart点击穿透处理

    document.onclick = function (e) { var e = e ? e : window.event; var tar = e.srcElement || e.target; ...

  9. 关于移动端的Click事件

    在移动端执行Click事件,通常情况出现有300毫秒的延迟,为防止这种不必要的延迟效果,我们可以换种方式来实现,同样达到快速执行Click事件的效果. 先了解一下移动端Click的执行顺序: touc ...

随机推荐

  1. Vue事件 定义方法执行方法 获取数据 改变数据 执行方法传值 以及事件对象

    <template> <div id="app"> <!-- <img v-bind:src='url' /> <img :src= ...

  2. Mac 打开、编辑 .bash_profile 文件

    export PATH=${PATH}:/Users/loaderman/Library/Android/sdk/platform-tools export PATH=${PATH}:/Users/l ...

  3. 生产环境zabbix3.2上亿的表数据通过表分区的方式进行历史数据清理

    生产环境zabbix3.2上亿的表数据通过表分区的方式进行历史数据清理 zabbix服务器经常报警io过载,在报警的时候发现是数据库在删除历史数据时耗时较长 数据库积攒了大量的历史数据信息,主要集中在 ...

  4. shell编程系列19--文本处理三剑客之awk中的字符串函数

    shell编程系列19--文本处理三剑客之awk中的字符串函数 字符串函数对照表(上) 函数名 解释 函数返回值 length(str) 计算字符串长度 整数长度值 index(str1,str2) ...

  5. 【转载】 clusterdata-2011-2 谷歌集群数据分析(三)

    原文地址: https://blog.csdn.net/yangss123/article/details/78306270 由于原文声明其原创文章不得允许不可转载,故这里没有转载其正文内容. --- ...

  6. Spring cloud微服务安全实战-4-5搭建OAuth2认证服务器

    现在可以访问我们的认证服务器,应用我们已经配置好了. 下面配置让用户可以访问我的认证服务器.再来重写一个方法. EndpointConfigure端点的配置. authenticationManage ...

  7. RabbitMQ 入门教程(PHP版) 第一部分:Hello World

    abbitMQ是一个消息代理.它的核心原理非常简单:接收和发送消息.你可以把它想像成一个邮局:你把信件放入邮箱,邮递员就会把信件投递到你的收件人处.在这个比喻中,RabbitMQ是一个邮箱.邮局.邮递 ...

  8. git 更新fork的远程仓库

    1.添加远程仓库到本地remote分支 git remote add upstream git@github.com:apache/flink.git # 远程仓库地址 2.查看当前仓库的远程分支 g ...

  9. Vue学习笔记十三:Vue+Bootstrap+vue-resource从接口获取数据库数据

    目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...

  10. 随机采样一致算法RANSAC

    A project to learn line, circle and ellipse detection in 2d images: https://github.com/Yiphy/Ransac- ...