如何在React中優(yōu)雅的處理doubleClick

aaron 發(fā)布于2019-08-30 15:44 / 1920人閱讀

摘要：解決辦法解決辦法也很簡單延遲事件的處理，直到判斷這個不在中。原理這個延遲的事件會放在一個隊列中，并處于狀態(tài)。當(dāng)事件觸發(fā)之后，就取消所有的這些事件也就不會執(zhí)行。

背景

上午樓主遇到一個需要處理雙擊事件的需求，在這里介紹下如何在觸發(fā)doubleCLick時間的時候, 不觸發(fā)click事件的解決辦法，順便分享給大家。

問題闡述

首先，我們的DOM 是天然支持dbClick 事件的，線上demo:

https://codepen.io/scaukk/pen...

可以清晰的看到，雙擊之后，觸發(fā)處理雙擊事件的邏輯，但是同時也觸發(fā)了兩次click事件：

這個副作用不是我們預(yù)期的，需要處理一下。

解決辦法

解決辦法也很簡單： 延遲 click事件的處理，直到判斷這個click 不在 doubleClick 中。

原理

這個延遲的click事件會放在一個 Promise 隊列中，并處于pending狀態(tài)。

當(dāng)doubleClick事件觸發(fā)之后，就取消所有的Pending Promises, 這些事件也就不會執(zhí)行。

可取消的Promise

要處理這些處于 penging 狀態(tài)的Promise, 我們需要用到可取消的Promise，這個話題我在另一片文章中討論過，有興趣的可以看一下。

下面是一個可以cancel的Promise的簡單實現(xiàn)：

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),
  };
};

要解決開頭提到的這個問題，我們就需要用到這個大殺器。

先看下最終的結(jié)果，雙擊一下：

主要代碼：

const EnhancedClickableBox = stopTriggerClicksOnDoubleClick(ClickableBox)

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

const App = () => {
  return (
    
  )
}

ReactDOM.render(, document.getElementById("app"));

線上Demo:

https://codepen.io/scaukk/pen...

Hooks 版本

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

  return (
    
  );
};


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



const App = () => {
  return (
   
  )
}

ReactDOM.render(, document.getElementById("app"));

https://codepen.io/scaukk/pen...

是不是很簡單，學(xué)到了吧 XD

結(jié)語

處理雙擊事件的時候，最好還是處理掉不必要的click調(diào)用，免得產(chǎn)生bug.

如果文章對你有幫助，點個贊支持一下唄。

文中若有錯誤，歡迎指出，歡迎留言交流。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116247.html

發(fā)表評論

登陸后可評論

0條評論

aaron

男|高級講師

我要關(guān)注我要私信

TA的文章

#開學(xué)季#無憂云：4核/4G/80G/5Mbps不限流量/洛陽BGP/月付59元，帶5G防御

閱讀 3890·2021-09-10 11:22
Pillow 10行代碼給營業(yè)執(zhí)照模板寫數(shù)據(jù)，批量生產(chǎn)

閱讀 2364·2021-09-03 10:30
記：原樣輸出文字，不做任何處理

閱讀 3676·2019-08-30 15:55
如何在React中優(yōu)雅的處理doubleClick

閱讀 1921·2019-08-30 15:44
怎樣分析頁面加載慢

閱讀 855·2019-08-30 15:44
純css三角形及其應(yīng)用

閱讀 603·2019-08-30 14:04
vue中的適配：px2rem

閱讀 3056·2019-08-29 17:18
swiper的使用

閱讀 1277·2019-08-29 15:04

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

如何在React中優(yōu)雅的處理doubleClick

相關(guān)文章