和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. shell编程系列3--命令替换

    shell编程系列3--命令替换 命令替换 命令替换总结 方法1 `command` 方法2 $(command) 例子1: 获取系统的所有用户并输出 for循环能以空格.换行.tab键作为分隔符 [ ...

  2. 一台服务器部署多台tomcat

    如题,多个项目部署在一台服务器.减少容错性,觉得分开部署,这样一个tomcat挂了不会影响另一个项目.看配置和应用大小决定数量,一般四五个没问题,也有单台服务器部署8个tomcat稳定运行的. 下面记 ...

  3. k8s记录-etcd集群部署(三)

    https://blog.csdn.net/fy_long/article/details/86542872 1)程序准备tar xvf etcd-v3.3.11-linux-amd64.tar.gz ...

  4. python设置socket的超时时间(可能使用locust压测千级并发的时候要用到,先记录在此)

    在使用urllib或者urllib2时,有可能会等半天资源都下载不下来,可以通过设置socket的超时时间,来控制下载内容时的等待时间. 如下python代码 import socket timeou ...

  5. 报错:(未解决)java.lang.VerifyError: Instruction type does not match stack map

    报错背景: CDH中集成kafka的服务,解决完kafka的jar包报错之后重启,发现这个报错. 报错现象: java.lang.VerifyError: Instruction type does ...

  6. LeetCode_237. Delete Node in a Linked List

    237. Delete Node in a Linked List Easy Write a function to delete a node (except the tail) in a sing ...

  7. JSON和JSONP具体是干神马的呢? (含jQuery实例)

    说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服 ...

  8. docker里安装kali linux

    docker里安装kali linux 官网镜像 docker search kali docker pull kalilinux/kali-linux-docker vi /etc/apt/sour ...

  9. 记录 centos samba 安装

    https://www.ruletree.club/archives/4/ https://www.linuxidc.com/Linux/2017-03/141390.htm

  10. 高级UI-SVG

    栅格图可以实现图片的清晰显示,但这也意味着如果要在各种设备上使用栅格图,那么在使用的时候就会产生为了适配各种尺寸的设备而增加大量不同规格的栅格图,这也直接导致了资源文件体积的增大,矢量图就不存在这个问 ...