iOS下Safari点击事件失效的解决方法
前言
本文主要给大家介绍了关于在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="https://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 使得元素变成了可点击的了。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对小牛知识库的支持。
-
本文向大家介绍Android 中ListView的Item点击事件失效的快速解决方法，包括了Android 中ListView的Item点击事件失效的快速解决方法的使用技巧和注意事项，需要的朋友参考一下 在平常的开发过程中，我们的ListView可能不只是简单的显示下文本或者按钮，更多的是显示复杂的布局，这样的话，我们就得自己写布局和自定义adapter了，一般是继承于BaseAdapter，示例
-
本文向大家介绍解决vue 绑定对象内点击事件失效问题，包括了解决vue 绑定对象内点击事件失效问题的使用技巧和注意事项，需要的朋友参考一下 突然的发现某段 html 代码中点击事件失效了。 仔细观察才发现，这段代码内的元素都在 vue 绑定对象中。 因此失效。 解决办法是将绑定对象内的元素点击事件换成 v-on:click。 以上这篇解决vue 绑定对象内点击事件失效问题就是小编分享给大家的全部内
-
本文向大家介绍Android中解决RecyclerView各种点击事件的方法，包括了Android中解决RecyclerView各种点击事件的方法的使用技巧和注意事项，需要的朋友参考一下 完美解决RecyclerView点击事件、长按事件、子项点击事件 自从Google推出了RecyclerView之后，便可以完全取代ListView，个人感觉唯一的美中不足是对于itemView的各种点击事件不够
-
本文向大家介绍ios10以下safari设置style无效的解决方法，包括了ios10以下safari设置style无效的解决方法的使用技巧和注意事项，需要的朋友参考一下 项目中遇到的奇怪问题，已定位原因。Attempted to assign to readonly property报错 起因：项目中写了个点击事件，增加动态效果，类似于转一转，rotate(360)。很简单的一个特效。 设置元素
-
本文向大家介绍Jquery对新插入的节点 绑定Click事件失效的解决方法，包括了Jquery对新插入的节点 绑定Click事件失效的解决方法的使用技巧和注意事项，需要的朋友参考一下 1.有人说用 Live， 事实上现在最新的Jquery已经不支持 Live 了。live的解决方法如下： 你可以看这个 也可以不看 ，只是做到心中有数就可以了。下面介绍ON的方法。 live：Live的使用介绍 2.
-
本文向大家介绍详解iOS中按钮点击事件处理方式，包括了详解iOS中按钮点击事件处理方式的使用技巧和注意事项，需要的朋友参考一下 写在前面 在iOS开发中，时常会用到按钮，通过按钮的点击来完成界面的跳转等功能。按钮事件的实现方式有多种，其中较为常用的是目标-动作对模式。但这种方式使得view与controller之间的耦合程度较高，不推荐使用； 另一种方式是代理方式，按钮的事件在view中绑定，co