JS开发必看：解决移动端 click 事件 300ms 延迟的两种实用方案

在移动端，由于触摸设备的特性，click事件会有300ms的延迟，这在用户体验上并不理想。为了解决这个问题，我们可以使用tap事件。 1. 使用Hammer.js库：Hammer.js是一个JavaScript库，用于处理触摸设备上的各种手势，包括点击、滑动、缩放等。我们可以使用Hammer.js库来监听tap事件，而不是click事件。 ```javascript var hammertime = new Hammer(document.body); hammertime.get('tap').set({threshold: 1, timeThreshold: 250}); hammertime.on('tap', function(e) { console.log('tap event fired'); }); ``` 2. 自定义tap事件：如果我们不想使用第三方库，我们也可以自己实现tap事件。以下是一个简单的示例： ```javascript function addEvent(element, event, callback) { if (element.addEventListener) { element.addEventListener(event, callback, false); } else if (element.attachEvent) { element.attachEvent('on' + event, callback); } } function removeEvent(element, event, callback) { if (element.removeEventListener) { element.removeEventListener(event, callback, false); } else if (element.detachEvent) { element.detachEvent('on' + event, callback); } } var tapTimeout; function handleTap(e) { clearTimeout(tapTimeout); tapTimeout = setTimeout(function() { // 在300ms后执行操作 console.log('tap event fired'); }, 300); } addEvent(window, 'touchstart', function(e) { handleTap(e); }); addEvent(window, 'touchend', function(e) { handleTap(e); }); ``` 这个示例中，我们监听touchstart和touchend事件，当手指触摸屏幕时，开始计时，当手指离开屏幕时，停止计时。如果在300ms内没有再次触摸屏幕，我们就认为这是一个点击操作，执行相应的操作。 ######[AI写代码神器 | 416点数解答 | 2023-11-09 00:54:32]