Лучший способ переключить события click to touchstart с помощью jQuery

Question

У меня есть веб-приложение, которое использует множество обработчиков событий $(document).on('click', selector, ...), и я хотел бы переключить их все на событие «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>

работает очень хорошо для меня.