您的位置：首页 > 移动开发 > IOS开发

iOS Safari 中点击事件失效的解决办法

2016-08-22 23:58 525 查看

问题描述

当使用委托给一个元素添加
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
使得元素变成了可点击的了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航