最近的一个项目，在测试ios时遇上了一些问题：
1.给div、span等元素绑定的点击事件无效
2.表单输入时整个页面白屏
3.readonly的元素出现光标（iphon5/ ios8.0）
第一条：给div、span（或非 a,input,button）等元素绑定的点击事件不起作用
|
1
2
3
4
5
6
7
8
|
$("body").on('click', '.mask', function(event) { event.preventDefault(); hideStatus('.pos-status'); if($('.protocal').is(':visible')){ hideStatus(".protocal"); } }); |
其中，mask是遮罩层，要实现的功能是：点击遮罩，隐藏弹窗。
在安卓上测试正常，但在ios中（只测了iphone6及以下），并没有什么用。
最终的解决方案是 给mask添加 cursor:pointer。
置于为什么 cursor:pointer 能解决这个问题…
并没有找到答案，但是找到了解决这个问题的其它方案和更具体的问题描述：
问题描述：
当使用委托给一个元素添加click事件时，如果事件是委托到 document 或 body 上，并且委托的元素是默认不可点击的（如 div, span 等），此时 click 事件会失效。
解决方案：
- 将
click事件直接绑定到目标元素（即.target）上 - 将目标元素换成
<a>或者button等可点击的元素 - 将
click事件委托到非document或body的父级元素上 - 给目标元素加一条样式规则
cursor: pointer;
总结：推测在 safari 中，不可点击的元素的点击事件不会冒泡到父级元素。通过添加 cursor: pointer 使得元素变成了可点击的了。
引用自: https://happycoder.net/solve-ios-safari-click-event-bug
第二条：表单输入时整个页面白屏（只测了iphone6及以下）
出问题的页面上包含了6条以上的表单元素（不确定是否与数量、结构有关），同样的页面在安卓上正常，在ios中出现如下情况
|
1
2
3
4
5
6
|
<div class="form-item"><i class="icon icon-pos"></i><div class="item-btn"><input type="text" name="address" class="form-text fix-addr" placeholder="请输入详细地址"></div></div> |
解决方案：给 item-btn 添加 position:relative；
第三条：readonly的元素出现光标（iphone5）
设置input为 readonly 出现了光标，在iphone5/ios8.0出现光标，（未测iphone5以下）
(pc端IE也有同样的问题，通过添加 unselectable=”on” 解决。 -webkit-user-select=none ,-moz-user-select=none )
解决方案：
1 1、input onfocus=”this.blur();” 2 3 2、$(document).on(‘focus’, ‘input[readonly]’, function () { 4 this.blur(); 5 });
(或设置为 disabled,但有 disabled 的元素不会提交，所以表单提交前要手动清除disabled）
此外transform在 iphone5失效
解决方案：
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
补充：
在ios中，使用fixed将元素固定在窗口底部时，如果document的高度（可通过chome f12审察元素查看）小于整个屏幕的高度，随着页面的上拉会出现底部显示不全或无法显示的现象。解决方案是让文档的高度100%。