クリックイベントをjQueryで切り替える最も良い方法

Question

多くの$(document).on('click', selector, ...)イベントハンドラを使用するWebアプリケーションがありますが、そのすべてを 'touchstart'イベントに切り替える必要がありますが、イベントのバブリングを避けたいいかなる場合でも複製することができます。

私はこれをすべて別々のJSファイルに分けようと考えていましたが、上記のイベントリスナーを利用するファイルがたくさんあります。

私はこれを実現するプログラム的な方法に興味がありますか？

私が考えていた：

$('a, button, input').each(function() { 
    $(this).on('touchstart', this.click); 
}); 

しかし、それはパフォーマンスの問題かもしれません。

Answer 1

使用しているデバイスでどのような種類のイベントが実装されているかに基づいて、どのイベントを使用するかを決めるのはおそらく解決策です。私のアプローチは、基本的には次のとおりです。

var clickEvent; 
 

 
if ('onpointerdown' in window) { 
 
    // use 'pointerdown' if pointerEvent API is supported 
 
    clickEvent = 'pointerdown'; 
 
    console.log('pointerEvents used'); 
 
} else if ('ontouchstart' in window) { 
 
    // use 'touchstart' if touch device 
 
    clickEvent = 'touchstart'; 
 
    console.log('touch device'); 
 
} else { 
 
    // else use mouse event 
 
    clickEvent = 'click'; 
 
    console.log('old fashioned mouse events'); 
 
} 
 

 
$(document).on(clickEvent, '#testbtn', function(e) { 
 
    $(e.target).css('color', 'red'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="testbtn"> Testbutton </button>

私にとっては非常によく動作し

。