關于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