React后台如何优雅的处理doubleClick

一上午，楼主遇到了一个需要处理双击事件的问题。下面我就介绍一下如何解决触发doubleCLick时间不触发点击事件的问题。顺便分享给大家。问题描述首先，我们的DOM天生就支持dbClick事件。在线demo：https://codepen.io/scaukk/pen...可以清楚的看到，双击后，触发了处理双击事件的逻辑，但同时也触发了点击事件twice：这个副作用不是我们预想的，需要处理。解决方案解决方案也很简单：延迟click事件的处理，直到判断点击不在doubleClick中。原理是延迟的点击事件会被放入一个Promise队列中，处于pending状态。当doubleClick事件被触发时，所有PendingPromises都会被取消，这些事件不会被执行。CancellablePromises处理这些处于penging状态的Promise，我们需要使用可取消的Promises。我在另一篇文章中讨论了这个话题。如果你有兴趣，你可以看看。下面是一个可取消Promise的简单实现：exportconstcancelablePromise=promise=>{letisCanceled=false;constwrappedPromise=newPromise((resolve,reject)=>{promise.then(value=>(isCanceled?reject({isCanceled,value}):resolve(value)),error=>reject({isCanceled,error}),);});返回{promise:wrappedPromise,cancel:()=>(isCanceled=true),};};要解决开头提到的问题，就要用到这个大杀器了。先看下最后的结果，双击一下：主要代码：constEnhancedClickableBox=stopTriggerClicksOnDoubleClick(ClickableBox)constDoubleClickExample=()=>(console.log("onclick")}onDoubleClick={()=>console.log("双击")}/>);constApp=()=>{return()}ReactDOM.render(,document.getElementById("app"));线上Demo:https://codepen.io/scaukk/pen...HooksconstClickableBox=({onClick,onDoubleClick})=>{const[handleClick,handleDoubleClick]=useClickPreventionOnDoubleClick(onClick,onDoubleClick);return(点击或双击);};constDoubleClickExample=()=>(console.log("on点击")}onDoubleClick={()=>console.log("双击")}/>);constApp=()=>{return()}ReactDOM.render(,document.getElementById("app"));https://codepen.io/scaukk/pen...是不是很简单，学习了XD尾声处理双击事件发生时，最好处理掉不必要的点击调用，避免bug。如果文章对您有帮助，请点赞支持。最后！[图片上传中...]