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 中進行測試。
<!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)文章
使用設(shè)計模式中的Singleton單例模式來開發(fā)iOS應(yīng)用程序
這篇文章主要介紹了使用設(shè)計模式中的Singleton單例模式來開發(fā)iOS應(yīng)用程序的例子,示例代碼為傳統(tǒng)的Objective-C語言,需要的朋友可以參考下2016-03-03
本文給大家分析了IOS在模塊發(fā)開發(fā)時候的相關(guān)注意點以及簡單代碼做了分享，有興趣的朋友參考學(xué)習(xí)下。2018-04-04
這篇文章主要為大家詳細(xì)介紹了ios 視頻下載功能實現(xiàn)，并自動保存到相冊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
iOS常用算法之兩個有序數(shù)組合并（要求時間復(fù)雜度為0(n)）
這篇文章主要介紹了iOS常用算法之兩個有序數(shù)組合并（要求時間復(fù)雜度為0(n)），實現(xiàn)思路是先將一個數(shù)組作為合并后的數(shù)組, 然后遍歷第二個數(shù)組的每項元素,需要的朋友可以參考下2019-07-07
本文給大家介紹ios原生二維碼掃描，有需要的朋友可以參考下2015-09-09
這篇文章主要為大家詳細(xì)介紹了iOS仿郵箱大師的手勢密碼解鎖的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要為大家詳細(xì)介紹了iOS實現(xiàn)抽獎轉(zhuǎn)盤效果的思路，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-01-01
這篇文章主要介紹了 Objective-C Json 實例詳解的相關(guān)資料,希望通過本文能幫助到大家，讓大家掌握Object-C Json的使用，需要的朋友可以參考下2017-10-10
這篇文章主要為大家詳細(xì)介紹了iOS實現(xiàn)循環(huán)滾動公告欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
iOS開發(fā)之TableView實現(xiàn)完整的分割線詳解
在iOS開發(fā)中, tableView是我們最常用的UI控件之一。所以這篇文章主要給大家詳細(xì)介紹了關(guān)于iOS中的TableView分割線，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-12-12