和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. ES6深入浅出-5 新版对象-2.属性修饰符

    对象语法增强 已经有了个对象的新增语法 还需要一个api来做呢?. 因为有的时候,你需要在旧的对象上添加get.set. 读的时候就走get 写的时候就走set 假设很早之前在项目里写了一个old对象 ...

  2. 数据结构与抽象 Java语言描述 第4版 pdf (内含标签)

    数据结构与抽象 Java语言描述 第4版 目录 前言引言组织数据序言设计类P.1封装P.2说明方法P.2.1注释P.2.2前置条件和后置条件P.2.3断言P.3Java接口P.3.1写一个接口P.3. ...

  3. AnyCAD三维控件(转)

    在WinForm中可以方便的集成AnyCAD.Net三维控件,只需要以下几部即可完成. 一.添加DLL程序集 AnyCAD.Foundation.Net.dll AnyCAD.Presentation ...

  4. centos7上安装mysql8(下)

    1.修改root密码 MySQL8和5的密码加密方式不同,mysql_native_password是5的加密方式.mysql已经将之前的mysql_native_password认证,修改成了cac ...

  5. Python第一阶段04

    1.文件操作: # 指明编码 f = open("sisi", encoding="utf-8") # 读 data = f.read() print(data ...

  6. 【redis】 windows 32x 64x

    下载地址:http://files.cnblogs.com/files/dtdxrk/redis_win.zip

  7. sharp.js中文文档

    高性能node.js图像处理库,使用libvips库来实现. 英文地址:sharp.pixelplumbing.com/ 中文文档地址:yunlzhang.github.io/sharp-docum…

  8. C# 邮件发送遇到的错误

    记录写邮件发送功能遇到的一些错误 1.System.Net.Mail.SmtpException:“Transaction failed. The server response was: DT:SP ...

  9. 基于libuv的TCP设计(三)

      基于libuv的TCP设计(一) 基于libuv的TCP设计(二)   一.第二版本的libuv_tcp已经基本可以使用.不会出错与崩溃现象,支持几百路客户端同时连接.可是有一缺陷就占用CPU非常 ...

  10. [计算机视觉][ARM-Linux开发] Ubuntu14.04安装OpenCV3.2中遇到的问题的解决方案

    2. ubuntu下,opencv3.x安装一直downloading这个包,要看超时信息里的下载路径,把它放到下载路径中,比如我的opencv3.2.0源文件路径为/home/han/softwar ...