记录–移动端的双击事件好不好用？

我们期望可以在移动端也能有双击事件，并且隔离单击与双击事件，双击时只触发双击事件，只执行双击回调函数，让注册双击事件像注册原生事件一样简单。

点击穿透

简单聊聊移动端的点击穿透。

在移动端单击会依次触发touchstart->touchmove->touchend->click事件。

有这样一段逻辑，在touchstart时出现全屏弹框，在click弹框时关闭弹框。实际上，在点击页面时，弹框会一闪而过，并没有出现正确的交互。在移动端单击时touchstart早于click，当弹框出现了，后来的click事件就落在了弹框上，导致弹框被关闭。这就是点击穿透的一种表现。

笔者的业务需求是双击元素，出现全屏弹框，单击弹框时关闭弹框。因此基于这样的业务需求与现实的点击穿透问题，笔者选择采用click事件来模拟双击事件，并且适配pc端使用。大家也可以选择解决点击穿透问题，并采用touchstart模拟双击事件，可以更快地响应用户操作。

采用touchstart模拟时，可以再考虑排除双指点击的情况。

在实现上与下文代码除了事件对象获取位置属性有所不同外，其它代码基本一致，实现思路无差别。

模拟双击事件

采用click事件来模拟实现双击。

双击事件定义：2次点击事件间隔小于200ms，并且点击范围小于10px的视为双击。这里的双击事件是自定义事件，为了区分原生的 dblclick，又优先满足移动端使用，则事件名定义为 dbltouch，后续可以使用window.addEventListener('dbltouch', ()=>{})来监听双击事件。

这个间隔与位移限制大家可以根据自己的业务需求调整。通常采用的是300ms的间隔与10px的位移，笔者业务中发现200ms间隔也可使用。

自定义事件名大家可以随意设置，满足语义化即可。

1. 监听click事件，并在捕获阶段监听，目的是为了后续能够阻止click事件传播。

function handler(evt) {     // 如果事件是脚本派发的则不处理，将该事件继续传播     if(!evt.isTrusted){         return;     } }

// 标识是否在等待第2次点击 let isWaiting = false;  // 记录点击位置 const prevPosition = {};  function handler(evt) {     // 如果事件是脚本派发的则不处理，将该事件继续传播     if(!evt.isTrusted){         return;     }     const { pageX, pageY } = evt;     if(isWaiting) {         isWaiting = false;         const diffX = Math.abs(pageX - prevPosition.pageX);         const diffY = Math.abs(pageY - prevPosition.pageY);         // 如果满足位移小于10，则是双击         if(diffX <= 10 && diffY <= 10) {             // 取消当前事件传递，并派发1个自定义双击事件             evt.stopPropagation();             evt.target.dispatchEvent(                 new PointerEvent('dbltouch', {                     cancelable: false,                     bubbles: true,                 })             )         }     } else {         prevPostion = { pageX, pageY };         // 阻止冒泡，不让事件继续传播         evt.stopPropagation();         // 开始等待第2次点击         isWaiting = true;         // 设置200ms倒计时，200ms后重新派发当前事件         timer = setTimeout(() => {             isWaiting = false;             evt.target.dispatchEvent(evt);         }, 200)     } }

window.addEventListener('dbltouch', () => {     console.log('dbltouch'); }) window.addEventListener('click', () => {     console.log('click'); }) // 使用鼠标、手指双击 // 打印出 dbltouch // 而且不会打印有click

笔者要在这里说句 但是： 由于200ms的延时，虽不多，但是对于操作迅速的用户来讲，还是会有不好的体验。

优化双击事件

由于是在window上注册的click函数，虽说注册双击事件像单击事件一样简单了，但却也导致整个产品页面的click事件都会推迟200ms执行。

因此，我们应该只对需要处理双击的地方添加双击事件，至少只在局部发生延迟情况。稍微调整下代码，将需要注册双击事件的元素由开发决定，通过参数传递。而且事件处理函数也可以通过参数传递，即可以通过监听双击事件，也可以通过回调函数执行。

以下是完整的代码。

class RegisterDbltouchEvent {     constructor(el, fn) {         this.el = el || window;         this.callback = fn;         this.timer = null;         this.prevPosition = {};         this.isWaiting = false;                  // 注册click事件，注意this指向         this.el.addEventListener('click', this.handleClick.bind(this), true);     }     handleClick(evt){         if(this.timer) {             clearTimeout(this.timer);             this.timer = null;         }         if(!evt.isTrusted) {             return;         };         if(this.isWaiting){             this.isWaiting = false;             const diffX = Math.abs(pageX - this.prevPosition.pageX);             const diffY = Math.abs(pageY - this.prevPosition.pageY);             // 如果满足位移小于10，则是双击             if(diffX <= 10 && diffY <= 10) {                 // 取消当前事件传递，并派发1个自定义双击事件                 evt.stopPropagation();                 evt.target.dispatchEvent(                     new PointerEvent('dbltouch', {                         cancelable: false,                         bubbles: true,                     })                 );                 // 也可以采用回调函数的方式                 this.callback && this.callback(evt);             }         } else {             this.prevPostion = { pageX, pageY };             // 阻止冒泡，不让事件继续传播             evt.stopPropagation();             // 开始等待第2次点击             this.isWaiting = true;             // 设置200ms倒计时，200ms后重新派发当前事件             this.timer = setTimeout(() => {                 this.isWaiting = false;                 evt.target.dispatchEvent(evt);             }, 200)         }     } }

const el = document.querySelector('#dbltouch'); new RegisterDbltouchEvent(el, (evt) => {     // 实现双击逻辑 })