ios下按鈕click事件點擊穿透問題

和app進行混合開發的時候，一個頁面使用h5寫的，按鈕上綁定click事件會觸發下面圖片上的a鏈接導致跳轉，頁面如圖

 

 頂部是一個banner，分vr、視頻、圖片三部分，紅框處的三個nav按鈕綁定click事件使banner滾動到響應的部分，banner上有a鏈接用以跳轉詳情,nav按鈕上綁定事件如下：

$(document).on("click","#banner-navBox .nav-btn",function(e){
    ...
});            

但是點擊nav按鈕的時候看不到banner滾動而是直接觸發下面banner上的a鏈接發生跳轉。

查閱資料發現移動端click事件的流程：touchstart -> touchend -> tap -> click。

touchend首先觸發tap然后等待300ms后觸發click。

想的是nav按鈕綁定click事件會先觸發touchend 事件，而移動端a鏈接的觸發機制就是touchend ，所以就導致先發生了頁面跳轉。所以nav按鈕綁定的時間改為touchend並阻止默認行為后完美解決，如下：

$(document).on("touchend","#banner-navBox .nav-btn",function(e){
    e.preventDefault();
    ...            
}