iOS下的點選事件失效解決方法
問題描述
當委託給一個元素新增click事件時，如果事件是委託到 document 或 body 上，並且委託的元素是預設不可點選的(如 div, span 等)，此時 click 事件會失效。
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="robots" content="index,follow"/>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telphone=no, email=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="320">
<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<meta name="browsermode" content="application">
<meta name="x5-page-mode" content="app">
<meta name="msapplication-tap-highlight" content="no">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
</head>
<body>
<div class="container"></div>
<div class="target">點選我!</div>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script>
$(function () {
// $(document).on(`click`, `.target`, function () {})
$(`body`).on(`click`, `.target`, function () {
alert(`我被點選了！！！`);
});
});
</script>
</body>
</html>
解決辦法
解決辦法有6種：
-
將
click事件直接繫結到目標元素(即.target) 上 -
將目標元素換成
<a>或者<button>等可點選的元素 -
給目標元素新增一個空的
onclick=""(<div class=”target” onclick=””>點選我!</div>) -
把
click改成touchend或touchstart（注意加上preventDefault） -
將
click元素委託到非document或body的父級元素上 -
給目標元素加一條樣式規則
cursor: pointer;(cursor: pointer; -webkit-tap-highlight-color: transparent;)
推薦後兩種。推測在 Safari 中，不可點選元素的點選事件是不會冒泡到父級元素的。通過新增 cursor: pointer; 使得元素變成了可點選的了。
補充
問題
iOS系統 input 及 input內元素 cursor: pointer; 失效，使得在 iOS系統 上需要藉助 cursor 屬性才能生效的 click 事件無法觸發
解決辦法
-
設定 font-size: 0;
-
把
click改成touchend（注意加上preventDefault）