如何在React中优雅的处理doubleClick?

摘要：上午楼主遇到一个需要处理双击事件的需求，在这里介绍下如何在触发doubleCLick时间的时候, 不触发click事件的解决办法，顺便分享给大家。解决办法也很简单：延迟 click事件的处理，直到判断这个click 不在 doubleClick 中。

上午楼主遇到一个需要处理双击事件的需求，在这里介绍下如何在触发doubleCLick时间的时候, 不触发click事件的解决办法，顺便分享给大家。

问题阐述

首先，我们的DOM 是天然支持dbClick 事件的，线上demo:https://codepen.io/scaukk/

可以清晰的看到，双击之后，触发处理双击事件的逻辑，但是同时也触发了两次click事件：

这个副作用不是我们预期的，需要处理一下。

解决办法

解决办法也很简单：延迟 click事件的处理，直到判断这个click 不在 doubleClick 中。

原理

这个延迟的click事件会放在一个 Promise 队列中，并处于pending状态。

当doubleClick事件触发之后，就取消所有的Pending Promises, 这些事件也就不会执行。

可取消的Promise

要处理这些处于 penging 状态的Promise, 我们需要用到可取消的Promise，这个话题我在另一片文章中讨论过，有兴趣的可以看一下。

下面是一个可以cancel的Promise的简单实现：

export const cancellablePromise = promise => {
  let isCanceled = false;

  const wrappedPromise = new Promise((resolve, reject) => {
    promise.then(
      value => (isCanceled ? reject({ isCanceled, value }) : resolve(value)),
      error => reject({ isCanceled, error }),
    );
  });

  return {
    promise: wrappedPromise,
    cancel: () => (isCanceled = true),
  };
};

要解决开头提到的这个问题，我们就需要用到这个大杀器。先看下最终的结果，双击一下：

主要代码：

const EnhancedClickableBox = stopTriggerClicksOnDoubleClick(ClickableBox)

const DoubleClickExample = () => (
  <EnhancedClickableBox
    onClick={() => console.log("on click")}
    onDoubleClick={() => console.log("on double click")}
  />
);

const App = () => {
  return (
    <DoubleClickExample />
  )
}

ReactDOM.render(<App />, document.getElementById("app"));

线上Demo:https://codepen.io/scaukk/

Hooks 版本

const ClickableBox = ({ onClick, onDoubleClick }) => {
  const [handleClick, handleDoubleClick] = useClickPreventionOnDoubleClick(onClick, onDoubleClick);

  return (
    <button onClick={handleClick} onDoubleClick={handleDoubleClick}>
      Click or double click
    </button>
  );
};


const DoubleClickExample = () => (
  <ClickableBox
    onClick={() => console.log("on click")} 
    onDoubleClick={() => console.log("on double click")}/>
);



const App = () => {
  return (
   <DoubleClickExample />
  )
}

ReactDOM.render(<App />, document.getElementById("app"));

https://codepen.io/scaukk/

是不是很简单，学到了吧 XD

结语

处理双击事件的时候，最好还是处理掉不必要的click调用，免得产生bug.

来自：https://segmentfault.com/a/1190000020057512

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_4663