和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. Dart函数方法

    /* 内置方法/函数: print(); 自定义方法: 自定义方法的基本格式: 返回类型 方法名称(参数1,参数2,...){ 方法体 return 返回值; } */ void printInfo( ...

  2. JS实现动态添加和删除div

    实现方式一:只在最后一个数据中动态添加或者删除 | 背景需要做一个页面,页面可以输入参数,点击确认按钮可以发请求给某接口.但是接口的某个字段是数组类型,所以在页面上需要实现添加或者删除元素的功能. | ...

  3. DataWorks2.0——DataStudio简单对比使用上手

    1.原先的数据管理去哪里了? 悬停在此图标上即可:  2.项目模式有何不同?

  4. ABAP DEMO33 选择周的搜索帮助

    效果图 *&---------------------------------------------------------------------**& Report YCX_02 ...

  5. python解决排列组合

    笛卡尔积:itertools.product(*iterables[, repeat]) import itertools for i in itertools.product('BCDEF', re ...

  6. IIS+PHP本地开发环境配置

    打开Win7系统自带IIS.如图只要点击两下,CGI一定要勾选上!完成后打开浏览器输入127.0.0.1测试一下,如果能打开页面说明iis开启成功. 安装PHP.不同版本的PHP会有所不同,这里使用的 ...

  7. FreeRTOS 时间片,外部中断,任务优先级的一个疑问

    时间片1ms 假设有两个任务,A和B,A任务等待中断里面发出的信号量,B任务在运行 此时,B任务运行了300us的时候中断发生,发出信号量,那么任务A接收到信号量,A任务优先级高,A任务运行 有个问题 ...

  8. Mathtype安装与最简破解

    1.MathType资源 链接: https://pan.baidu.com/s/1UapJCcfU7Me_rIWdAe5nfw   提取码:   1y9i 2.破解 我之前的30天试用期过了,没来得 ...

  9. 欧姆龙PLC_CP1H_CRC校验

    1.简介 欧姆龙CP1H PLC的CRC校验.CP1H没有CRC校验指令或者功能块,在串口自由协议通信中,如果涉及到CRC校验,需要手动计算CRC值,本程序是一个输入数据,自动计算CRC校验码的程序. ...

  10. windows下大数据开发环境搭建(4)——Spark环境搭建

    一.所需环境 · Java 8 · Python 2.6+ · Scala · Hadoop 2.7+ 二.Spark下载与解压 http://spark.apache.org/downloads.h ...