jQueryのタップとタッチ限りアクション

Question

は、私は指の下の領域は、ボタンやリンクを持っている場合、私は、

$(document).on('click touchstart', 'element', function() { /*Some code*/ }); 

tabberスイッチとボタンをタップtabberを、持っている - それはアクティブです。

この影響を避けるにはどうすればよいですか？

ありがとうございます！このような

何か：jsfiddle.net/r99headp（Google Chromeでのデバイスのツールバーをアクティブに）

Answer 1

私の知る限りでは、私はこれがtouchstartイベントにパッシブイベントリスナーとイベントの伝播に関係していると思います。私はそうのようなあなたも、ハンドラにprevenDefaultを追加しようとしたとき：

$(function() { 
    $(document).on('click touchstart', '.js-next', function(e){ 
     e.preventDefault(); 
     $('.js-tab').click(); 
    }); 
}); 

私はクロームでこの警告が出ます：受動的なものとして扱われているターゲットに起因する受動的なイベントリスナーの内部でpreventDefaultにできません

を。 falseに受動的

AddEventListenerOptionsのデフォルトを：あなたはドキュメントでこれを見ることができますそのリンクに続きhttps://www.chromestatus.com/features/5093566007214080

を参照してください。この変更を開始すると、ドキュメントに追加されたtouchmoveリスナーは、デフォルトでpassive：trueに設定されます（preventDefaultの呼び出しは無視されます）。 jQueryのaddEventListenerに渡すオプションとの継続的な問題があることを言うhttps://stackoverflow.com/a/39187679/1819684：

それを追いかけ、私はSOにこの答えに出くわしました。意味は、現時点では、あなたはjQueryでそれを行うことができず、passive: falseと設定します。だから私はこれにあなたの例のコードを作り直し：https://jsfiddle.net/w9h4an81/

$(function() { 
    document.addEventListener('touchstart', function(e) { 
     e.preventDefault(); 
     $('.js-tab').click(); 
    }, {passive: false}); 

    $(document).on('click', '.js-next', function(e){ 
     $('.js-tab').click(); 
    }); 
}); 

だけjQueryを使ってこれを行うには、このような何かをする必要があります：https://jsfiddle.net/6377wdhc/あなたがdocumentに聞くことができません。

$(function() { 
    $('.js-next').on('click touchstart', function(e){ 
     e.preventDefault(); 
     $('.js-tab').click(); 
    }); 
});