关于iOS的APP弹出遮罩层内的跳转事件失效问题

1. ios自身问题

在项目完成后，安卓和苹果手机测试中，发现 iOS的APP弹出遮罩层内的点击事件失效问题，浏览器并无此问题。很奇怪，推测是ios系统和Android系统不同的缘故。经测试，Android一点问题没有。但是，ios系统却死活没反应。测试了n个方法都不可用。所以，判断为其本身系统的原因。

绝对定位下的top和bottom属性

偶然间，发现遮罩层内设置的CSS 样式，top和bottom这两个属性对ios系统有较大影响。貌似ios对绝对定位不是特别友好，点击事件（包括超链接）被固定在最上方或者最下方时，可用。当top或者bottom属性设置超出一定范围，会产生点击事件位置往上或下偏移的问题。从而导致，点击视觉按钮位置时没有任何效果。

解决办法

/* 遮罩层内按钮 */
.button{
	position: absolute;
	bottom: 0; /* 如有需求可替换为 top:0 定位在最上方 */
	...
}
           

经测试，完全没有问题。

2. 服务器问题

服务器这个问题是后来另一个项目发现的。这个app问题按钮的bottom已经设置为同上代码，但是依然点击无效果。这个问题变的更奇怪了，我反复修改和测试了几次发现，其并没有偏移而是需要手触一小会儿才会跳转。

这个问题我也很纳闷，Android就毫无问题，你ios怎么这么矫情？

延时事件未延时导致

后来，发现js里面有个延时事件是“取消操作”，而且客户给的服务器巨卡。结合这两点，我推测可能是服务器响应过程中，延时事件也同步运行，由于服务器巨卡，导致延时事件提前加载，从而阻断页面跳转。

// js
setTimeout(function(){
	if(_htm == $('.tap').html()) Dsheet(0); // Dsheet(0)是取消操作
}, 100); // 延时100ms

           

解决方法

1. 把延时事件的延时时间设置的较大些，再测试，果然可以跳转了。

// js
setTimeout(function(){
	if(_htm == $('.tap').html()) Dsheet(0); // Dsheet(0)是取消操作
}, 5000); // 延时5s

           

1. 把延时事件修改成“无操作”，测试后也可以跳转。

// js
setTimeout(function(){
	if(_htm == $('.tap').html()) Dsheet(1); // Dsheet(1)是无操作
}, 100); // 延时100ms