モバイル側ページtouchが「貫通」するソリューション

モバイル側ページtouchが「貫通」するソリューション
1.移動先ページtouchが貫通する
H 5ページが移動先に表示される場合、clickイベントは300 msの遅延があるため、touchイベントを用いることが望ましい.touchイベントは
     1.touchstart:指をDOM要素に置きます.     2.touchmove:指がDOM要素をドラッグします.     3.touchend:指をDOM要素から外します.
touchが「貫通」するのは重複する領域で、隠された要素がclickにバインドされ、隠された要素がtouchイベントにバインドされ、touch後に隠された要素が隠すと、clickがtouch後に遅延してトリガーされるため、ブラウザはカバーの要素にclickがトリガーされたと勘違いします.
移動端のclickはtouchの後で、トリガをシミュレートします.トリガの順序はt o u c h s t o r t o u c h m o v e touchendmousedownmousemovemouseenterclick
2.解決策は次のとおりです.
カバーされた要素はtouchendイベントをバインドし、そのtouchendイベントをトリガーすると、カバーされた要素をクリックできないように設定します.

 $("#picList").css("pointer-events","none");

同時に与える
隠し要素バインドclick
イベントは、clickイベントでイベントのバブルを阻止します.

 $('.tab1').on('click',function(event){
        	 var evt = event || window.event;
	//IE cancelBubble=true    FF    stopPropagation  
	evt.stopPropagation ? evt.stopPropagation() : (evt.cancelBubble=true);
    		 
    	      });

3.cssのpointer-eventsプロパティ
auto-pointer-eventsプロパティが定義されていないのと同じ効果で、マウスは現在のレイヤを貫通しません.
none-要素はマウスイベントのターゲットではなく、マウスは現在のレイヤをリスニングせず、下のレイヤの要素をリスニングします.しかし、そのサブエレメントがpointer-eventsを他の値に設定している場合、autoなど、マウスはこのサブエレメントを監視します.マウスイベントをキャプチャすることなく、マウスをオブジェクトに貫通させる