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 ...
随机推荐
- flutter 中的搜索条实现
import 'package:flutter/material.dart'; import 'package:flutter_app/SearchBarDemo.dart'; void main() ...
- Python之Django之views中视图代码重复查询的优化
Django框架中views视图中如果多个函数都有同样的查询语句,例如: allcategory = Category.objects.all() remen = Article.objects.fi ...
- Python3基础 str __add__ 拼接,原字符串不变
Python : 3.7.3 OS : Ubuntu 18.04.2 LTS IDE : pycharm-community-2019.1.3 ...
- c++调用动态库失败解决办法
c++调用动态库失败解决办法 之前写好的程序今天早上过来发现在服务器上出错了,于是就各种查问题,整整一个早上外加下午两个小时都在查这个问题,最终被我找到了问题: 在程序中我发现LoadLibrary( ...
- 一台服务器部署多台tomcat
如题,多个项目部署在一台服务器.减少容错性,觉得分开部署,这样一个tomcat挂了不会影响另一个项目.看配置和应用大小决定数量,一般四五个没问题,也有单台服务器部署8个tomcat稳定运行的. 下面记 ...
- How to Plan and Configure YARN and MapReduce 2 in HDP 2.0
As part of HDP 2.0 Beta, YARN takes the resource management capabilities that were in MapReduce and ...
- BladeX部署说明(win7)
一:安装jdk-8u221-windows-x64 二:安装Nacos,解压nacos-server-1.0.0,运行bin目录下的startup.cmd,成功可以用浏览器访问:localhost:8 ...
- 有哪些可能的原因导致BDE死掉啊啊,求救了,谢谢
一个服务程序在后台跑,用到了BDE访问SQLServer,隔了一段时间就会莫名其妙的与数据库连接失败,查了一下BDE,发现已经死掉了,bde administrator也无法打开,报错,重启或注销机器 ...
- Juniper总结
Juniper的路由器分为两个部分——RE和PFE.不过貌似大部分路由器都分为这两个部分.... Routing Engine: 当密码授权通过之后,用户就进入了RoutingEngine中,在其中可 ...
- 各种软件安装的URL
Python爬虫动态抓取的工具 PhantomJS