IOS safari 点击失效详解
出现情况： 使用 zepto 或 jQuery 的情况下，给一个元素添加click事件，如果事件是委托到 document 或 body 上，并且委托的元素是默认不可点击的（如 div, span 等），此时 click 事件在IOS safari中会失效。
案例如下：
<!DOCTYPE html>
<html>
<head>
<title>ios click test</title>
</head>
<body>
<div id="main">
<div id="text">test test</br>test test</br>test test</br></div>
<a id="link">this is a link</a>
<button id="btn">hello world</button>
<input type="text" name="name" id="name" placeholder="click input"/>
</div>
<script type="text/javascript" src="./deps/zepto.js"></script>
<script type="text/javascript">
$(document).on('click', '#text', function() {
alert('text'); //IOS中点击失效
}).on('click', '#link', function() {
alert('link'); //IOS中点击有效
}).on('click', '#btn', function() {
alert('btn'); //IOS中点击有效
}).on('click', '#name', function() {
alert('input'); //IOS中点击有效
});
</script>
</body>
</html>
解决方案
- 将
click事件直接绑定到目标元素（即target）上。 - 将目标元素换成
< a>或者button等可点击的元素。 - 将
click事件委托到非document或body的父级元素上。 - 给目标元素加一条样式规则
cursor: pointer。 - 使用原生方式委托事件。
touchstart事件阻止默认事件会导致click不响应
案例如下：
有父子两个元素，父元素Father,子元素Child。
Vue中为子元素绑定了click事件，但是在ipad上从来没有进入其处理函数。
父元素通过addEventListener绑定事件
document.getElementById('Father').addEventListener('touchstart', handleFather);
子元素通过Vue的@click绑定
<div id="Child" @click="handleChild">
每次点击首先响应父元素的事件（事件顺序以及click延时导致），进入handleFather处理函数，函数中设置了e.preventDefault()。那么将导致后面的click事件不会触发。