使用jQuery将点击事件切换到touchstart的最佳方法

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>

对我来说效果很好.