移動端項目踩到的坑及解決方案

摘要: 近期在做移動端項目開發當中遇到了一些了，整理了一些出來，希望對前端小夥伴有幫助。

問題1：輸入框的readonly屬性在IOS的兼容問題

問題描述：在業務中，需要對某些個輸入框進行readonly操作，Android和PC(僅僅是使用開發者工具進行移動端模擬)都是OK的，但是在IOS上點擊的時候卻依然會出現游標，聚焦依然存在。

問題解決：

1：查詢網上一些資料，很多都說是使用 unselectable="on"，好吧，用過後發現並沒有什麼卵用，原因在於這個屬性並不是針對readonly的，而是針對blur的，只能換方法(此方法不成功)

2：另外一種方法是直接設置input的disabled屬性，但是這樣設置會使input的事件失效，而且個人感覺，你設置了disabled，我還得去設置disabled的樣式，這又是一個新的問題，由一個問題引發出另一個問題，這確實不是一個好的解決辦法(此方法成功，但是有缺陷)

3：還有一種方法就是在input聚焦的時候讓它馬上失去焦點，這樣就能規避掉游標的顯示問題，具體代碼如下：

$(input[readonly]).on(focus, function() {n $(this).trigger(blur);n}); n

這樣就設置成了通用的，能保證兼容性(此方法可行)

問題2：jquery在IOS中事件委託到body或者document上導致失效

問題描述：因為DOM結構是後台返回數據動態生成的，所以需要將生成的DOM綁定的事件委託到父級或者更高級的節點中去，但是如果委託到body或者document上的時候，Android和PC上都是OK的，在IOS又是失效的，這是個什麼鬼？網上查到的問題描述是：IOS上事件不能委託不能綁定到body或者document上，應該綁定到它的其他父級元素上，原因是因為被委託的元素(像span或者div這樣)默認是不可點擊的，所以此時的click事件會失效，好吧，這我能理解，但是你說默認不可點擊的元素，委託到父級元素上就可以點擊，但是委託到body或者document就不行了，同樣的標籤，還有這差別？猜測是不是不可點擊的元素的點擊事件不會冒泡到父級元素？也不應該，委託到父級元素上是可以點擊的，這點就能把猜測推翻！！！！好吧，我還在糾結這個問題！

問題解決：

1：將click事件直接綁定到目標元素上(不適用於動態生成的數據)

2：將目標元素(類似span或者div這樣的標籤元素)替換成<a>或者<button>這類可點擊的元素

3：將click事件委託到除了document或body的父級元素上(應該是這種比較好)。

4：給目標元素統一加一條樣式：cursor：pointer(這個時候才明白同事先前為什麼讓我在IOS上設置css的時候把所有元素設置這個屬性);這樣就把目標元素變成了可以點擊了的，從而能進行正常的事件冒泡到body或者document上。

5：或者可以直接在目標元素上寫行內事件：<div onclick=></div>這樣，也是OK的(但是個人不推薦)

好吧，目前暫時遇到這麼些坑，後續遇到其他的再行補充

原文作者：梅氣灶

原文地址：移動端項目踩到的坑及解決方案 - 博客新聲

版權說明：本文由極樂科技合作博主原創，轉載請註明作者與出處，謝謝！

一元搶購小程序>>>鏈接地址

推薦閱讀：