如何在React中優雅的處理doubleClick

aaron 發布于2019-08-30 15:44 / 1872人閱讀

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

背景

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

問題闡述

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

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

可以清晰的看到，雙擊之后，觸發處理雙擊事件的邏輯，但是同時也觸發了兩次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 = () => (
   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...

是不是很簡單，學到了吧 XD

結語

處理雙擊事件的時候，最好還是處理掉不必要的click調用，免得產生bug.

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116247.html

如何在React中優雅的處理doubleClick

摘要：解決辦法解決辦法也很簡單延遲事件的處理，直到判斷這個不在中。原理這個延遲的事件會放在一個隊列中，并處于狀態。當事件觸發之后，就取消所有的這些事件也就不會執行。背景上午樓主遇到一個需要處理雙擊事件的需求，在這里介紹下如何在觸發doubleCLick時間的時候, 不觸發click事件的解決辦法，順便分享給大家。問題闡述首先，我們的DOM 是天然支持dbClick 事件的，線上...

doodlewind 2019-08-26 10:45 評論0 收藏0
[前端][自定義DOM事件]不使用setTimeout實現雙擊事件或n擊事件

摘要：使用實現雙擊事件例如，這樣雙擊省略參數合法性的判斷自定義雙擊事件可以使用攜帶數據雙擊事件監聽雙擊事件觸發是否已經點擊過一次事件分發使用數組實現雙擊事件或擊事件靈感來自于系統多擊觸發彩蛋的源碼用前端的方式實現長這樣雙擊省略參數合法性的判斷創建使用setTimeout實現雙擊事件例如，這樣： let div = document.getElementById(div); doubleC...

Kerr1Gan 2019-08-26 11:47 評論0 收藏0
[前端][自定義DOM事件]不使用setTimeout實現雙擊事件或n擊事件

摘要：使用實現雙擊事件例如，這樣雙擊省略參數合法性的判斷自定義雙擊事件可以使用攜帶數據雙擊事件監聽雙擊事件觸發是否已經點擊過一次事件分發使用數組實現雙擊事件或擊事件靈感來自于系統多擊觸發彩蛋的源碼用前端的方式實現長這樣雙擊省略參數合法性的判斷創建使用setTimeout實現雙擊事件例如，這樣： let div = document.getElementById(div); doubleC...

Cobub 2019-08-01 18:37 評論0 收藏0
如何優雅地在React中處理事件響應

摘要：處理事件響應是應用中非常重要的一部分。中，處理事件響應的方式有多種。關于事件響應的回調函數，還有一個地方需要注意。不管你在回調函數中有沒有顯式的聲明事件參數，都會把事件作為參數傳遞給回調函數，且參數的位置總是在其他自定義參數的后面。 React中定義一個組件，可以通過React.createClass或者ES6的class。本文討論的React組件是基于class定義的組件。采用cla...

buildupchao 2019-08-20 18:14 評論0 收藏0
[ 一起學React系列 -- 5 ] 如何優雅得使用表單控件

摘要：假如我們從后臺拉取一個數據要填入輸入框，那么必須得使用受控組件，因為非受控組件只能被用戶輸入。不影響正常輸入填充該輸入框的默認值，此時不顯示內容。網頁中使用的form表單大家肯定都再熟悉不過了，它主要作用是用來收集和提交信息。React中的表單組件與我們普通的Html中的表單及其表現形式沒有什么不同，所以如何使用表單我覺得再拿出來說可能是畫蛇添足、毫無意義。不過再怎么樣也不能辜負大家...

Charlie_Jade 2019-08-26 12:20 評論0 收藏0