移动端点击问题

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事件不会触发。