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