javascript - 使用 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>

对我来说效果很好。