问题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() {
 $(this).trigger('blur');});

这样就设置成了通用的，能保证兼容性(此方法可行)

问题2：jquery在IOS中事件委托到body或者document上导致失效

问题描述：因为DOM结构是后台返回数据动态生成的，所以需要将生成的DOM绑定的事件委托到父级或者更高级的节点中去，但是如果委托到body或者document上的时候，Android和PC上都是OK的，在IOS又是失效的，这是个什么鬼？网上查到的问题描述是：IOS上事件不能委托不能绑定到body或者document上，应该绑定到它的其他父级元素上，原因是因为被委托的元素(像span或者div这样)默认是不可点击的，所以此时的click事件会失效，好吧，这我能理解，但是你说默认不可点击的元素，委托到父级元素上就可以点击，但是委托到body或者document就不行了，同样的标签，还有这差别？猜测是不是不可点击的元素的点击事件不会冒泡到父级元素？也不应该，委托到父级元素上是可以点击的，这点就能把猜测推翻！！！！好吧，我还在纠结这个问题！

推荐下我的前端群：611256580，不管你是小白还是大牛，小编我都欢迎，不定期分享干货，包括我自己整理的一份前端资料和零基础入门教程，欢迎初学者和在进阶中的小伙伴。

问题解决：

1：将click事件直接绑定到目标元素上(不适用于动态生成的数据)

2：将目标元素(类似span或者div这样的标签元素)替换成<a>或者<button>这类可点击的元素

3：将click事件委托到除了document或body的父级元素上(应该是这种比较好)。

4：给目标元素统一加一条样式：cursor：pointer(这个时候才明白同事先前为什么让我在IOS上设置css的时候把所有元素设置这个属性);这样就把目标元素变成了可以点击了的，从而能进行正常的事件冒泡到body或者document上。

5：或者可以直接在目标元素上写行内事件：<div onclick=''></div>这样，也是OK的(但是个人不推荐)

好吧，目前暂时遇到这么些坑，后续遇到其他的再行补充

原文作者：梅气灶

原文地址：https://my.oschina.net/meichao/blog/1476534