【javascript】iOS Safari 中点击事件失效的解决办法
问题描述
当使用委托给一个元素添加click事件时，如果事件是委托到 document 或 body 上，并且委托的元素是默认不可点击的（如 div, span 等），此时 click 事件会失效。
可以使用下面的代码在 iOS 中进行测试。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>iOS click bug test</title> <style>
.container {
} .target {
display: block;
text-align: center;
margin: 100px 30px 0;
padding: 10px 0;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="target"> Click Me! </div>
</div> <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
// 或者 $(document).on('click', ....)
$('body').on('click', '.target', function (e) {
alert('click');
});
</script>
</body>
</html>
解决办法
解决办法有 4 种可供选择：
- 将
click事件直接绑定到目标元素（即.target）上 - 将目标元素换成
<a>或者button等可点击的元素 - 将
click事件委托到非document或body的父级元素上 - 给目标元素加一条样式规则
cursor: pointer;
推荐后两种。从解决办法来看，推测在 safari 中，不可点击的元素的点击事件不会冒泡到父级元素。通过添加 cursor: pointer 使得元素变成了可点击的了。
【javascript】iOS Safari 中点击事件失效的解决办法的更多相关文章
- iOS Safari 中点击事件失效的解决办法
问题描述 当使用委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效. ...
- iOS中点击事件失效的解决办法
解决办法有 2种可供选择: 将目标元素换成 <a> 或者 button 等可点击的元素 给目标元素加一条样式规则 cursor : pointer;
- ［转］iOS Safari 中click点击事件失效的解决办法
iOS Safari 中click点击事件失效的解决办法 问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素 ...
- iOS Safari 中click点击事件失效的解决办法
问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素添加click事件时,如果事件是委托到 document ...
- 在vue中关于element UI 中表格实现下载功能，表头添加按钮，和点击事件失效的解决办法。
因为在element 中表格是使用el-table的形式通过数据来支撑结构,所以,表格的样式没有自己写的灵活,所以有了没法添加按钮的烦恼.下面是解决的方法. 准备工作: 一.下载npm安装包两个 1. ...
- ios端position为fixed失效的解决办法
关键代码 document.getElementById("searchInputbox").addEventListener('touchmove', handler, {pas ...
- vue中router-link的click事件失效的解决办法
title: vue中router-link的click事件失效的解决办法 toc: false date: 2018-12-04 16:28:49 categories: Web tags: vue ...
- 使用PullToRefreshListView时遇到Item点击事件失效问题 解决方法
最近在自己的项目中使用到了以下开源项目: https://github.com/nanchen2251/pullToRefreshDemo 相关介绍博客如下: http://www.cnblogs.c ...
- 苹果IOS下text-shadow与box-shadow失效的解决办法
加入以下样式,可以解决苹果IOS下text-shadow与box-shadow失效的问题 -webkit-appearance: none
随机推荐
- 一名优秀的UI设计师应该具备哪些条件？
想做好一个好的UI设计师除了应该具有一定的审美能力,还要了解整个产品的开发过程,因为目前国内的软件行业还不能对UI设计形成应有的重视度,所以对我们的要求就更高了,你要能作出夺人眼球的东西,还要站在用户 ...
- Laravel 5.5 Api
Laravel api token验证使用方法 从 Laravel 5.2 开始, Laravel 的将路由的配置进行了分拆, 在 routes 目录下有 web.php 和 api.php 两个路由 ...
- windown 安装配置 mvn不是内部或外部命令
path 检查没有任何问题,就直接把maven路径直接放到path前面 如果提示JAVA_HOME not found 之类错误,环境变量中需要设置JAVA_HOME,而且需要在path中添加%JAV ...
- Largest product from 3 integers
https://github.com/Premiumlab/Python-for-Algorithms--Data-Structures--and-Interviews/blob/master/Moc ...
- spring-data-jpa+hibernate 各种缓存的配置演示
本文所有测试用代码在https://github.com/wwlleo0730/restjplat 的分支addDB上 目前在使用spring-data-jpa和hibernate4的时候,对于缓存关 ...
- hdu-1728（bfs+优化）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1728 注意:1.先输入起点(y1,x1)和终点(y2,x2): 2.如果一个一个遍历会超时. 思路:每 ...
- Caused by: Unable to load configuration. - action - file:/C:/apache-tomcat-7.0.70/webapps/Structs/WEB-INF/classes/struts.xml:7:72 at com.opensymphony.xwork2.config.ConfigurationManager.getConfigurati
Unable to load configuration. - action - file:/C:/apache-tomcat-7.0.70/webapps/Structs/WEB-INF/class ...
- UVa 11384 Help is needed for Dexter （递归）
题意:给定一个n表示1到n的序列,让你用最小的步数把这个序列都变为0,每个操作可以从序列中选择一个或多个个,同时减掉一个正整数,求最少的步数. 析:一看这个题,感觉挺高深的,但是静下心来想想,其实挺简 ...
- day06(Collection，List，ArrayList，LinkedList，iterator迭代器，增强for)
Collection 接口 方法实现 boolean add(Object o);//添加 boolean remove(Object o);//移除 修改方法 让实现类自己去实现修 ...
- python正则表达式转义注意事项
无论哪种语言,在使用正则表达式的时候都避免不了一个问题,就是在匹配元字符的时候,需要对元字符进行转义,让 正则表达式引擎将其当做普通字符来匹配.本文主要以python为例,说明一下转义中需要注意的问题 ...