iOS下Safari點擊事件失效的解決方法
更新時間：2018年01月18日 08:26:37 作者：SangSir
這篇文章主要給大家介紹了關(guān)于在iOS下Safari點擊事件失效的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
前言
本文主要給大家介紹了關(guān)于在iOS下Safari瀏覽器點擊事件失效的相關(guān)解決方案，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細(xì)的介紹吧。
問題描述
當(dāng)使用委托給一個元素添加click事件時，如果事件是委托到 document 或 body 上，并且委托的元素是默認(rèn)不可點擊的（如 div, span 等），此時 click 事件會失效。
可以使用下面的代碼在 iOS 中進(jìn)行測試。
<!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="http://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 事件直接綁定到目標(biāo)元素（即 .target）上
- 將目標(biāo)元素?fù)Q成 <a> 或者 button 等可點擊的元素
- 將 click 事件委托到非 document 或 body 的父級元素上
- 給目標(biāo)元素加一條樣式規(guī)則
cursor: pointer;
推薦后兩種。
從解決辦法來看，推測在 safari 中，不可點擊的元素的點擊事件不會冒泡到父級元素。通過添加 cursor: pointer 使得元素變成了可點擊的了。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了iOS第三方框架二維碼生成與掃描，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
這篇文章主要為大家詳細(xì)介紹了iOS通過按鈕添加和刪除控件的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-03-03
這篇文章主要為大家介紹了iOS?StoreKit?2?新特性盤點及要點解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要為大家詳細(xì)介紹了iOS實現(xiàn)波浪效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
這篇文章主要介紹了IOS 百度糯米客戶端登錄BUG，問題分析及解決方案，本文介紹的非常詳細(xì)，具有參考價值，特此分享供大家學(xué)習(xí)2016-01-01
這篇文章主要為大家詳細(xì)介紹了iOS push側(cè)滑返回功能實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
iOS開發(fā)之時間戳(或date)轉(zhuǎn)字符串的實例代碼
這篇文章主要介紹了iOS開發(fā)之時間戳(或date)轉(zhuǎn)字符串的實例代碼,需要的朋友可以參考下2017-10-10
視頻音頻是我們在ios日常開發(fā)中經(jīng)常會遇到的一個需求，所以下面這篇文章主要給大家介紹了關(guān)于iOS開發(fā)中音頻視頻播放的簡單實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10
這篇文章主要為大家詳細(xì)介紹了iOS實現(xiàn)拼圖小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家詳細(xì)介紹了詳解iOS時間選擇框，感興趣的小伙伴們可以參考一下2016-03-03