整理了下曾经在ios上遇到过的一个坑
当通过事件委托对document或body绑定click事件时，若实际点击的元素原来是不可点击的（如p，span，div等），ios环境下这个click事件不会被触发。
例如下面这段代码，在PC上调试时可以正常触发，到ios的safri中测试就不行。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,inital-scale=1.0,user-scalable=0">
<title>ios view test</title>
</head>
<body>
<div class="test">
<p>click here</p>
</div>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$('body').on('click', '.test', function (e) {
alert('test');
});
</script>
</body>
<style>
.test {
width: 200px;
border: 1px solid #000;
}
.test p {
text-align: center;
height: 50px;
line-height: 50px;
}
</style>
</html>
现有如下解决方法：
1）给实际点击的元素加CSS。
cursor:pointer;
2）不要委托到document或body上，新增一个父级DOM节点。
3）将实际点击的元素换成button，a等可以点击的元素。
4）给实际点击的元素绑定click事件。（这个方法应该不会用到，一般使用事件委托的目的就是为了不直接给实际点击的元素绑定事件，减少DOM的操作）
扫一扫
1364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
