成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

doodlewind / 1738人閱讀

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

背景

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

問題闡述

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

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

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

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

解決辦法

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

原理

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

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

可取消的Promise

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

下面是一個(gè)可以cancel的Promise的簡單實(shí)現(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),
  };
};

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

先看下最終的結(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é)語

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

如果文章對(duì)你有幫助， 點(diǎn)個(gè)贊支持一下唄。

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/106721.html

相關(guān)文章

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

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

    aaron 評(píng)論0 收藏0

  • [前端][自定義DOM事件]不使用setTimeout實(shí)現(xiàn)雙擊事件或n擊事件

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

    Kerr1Gan 評(píng)論0 收藏0

  • [前端][自定義DOM事件]不使用setTimeout實(shí)現(xiàn)雙擊事件或n擊事件

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

    Cobub 評(píng)論0 收藏0

  • 如何優(yōu)雅地在React中處理事件響應(yīng)

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

    buildupchao 評(píng)論0 收藏0

  • [ 一起學(xué)React系列 -- 5 ] 如何優(yōu)雅得使用表單控件

    摘要：假如我們從后臺(tái)拉取一個(gè)數(shù)據(jù)要填入輸入框，那么必須得使用受控組件，因?yàn)榉鞘芸亟M件只能被用戶輸入。不影響正常輸入填充該輸入框的默認(rèn)值，此時(shí)不顯示內(nèi)容。 網(wǎng)頁中使用的form表單大家肯定都再熟悉不過了，它主要作用是用來收集和提交信息。React中的表單組件與我們普通的Html中的表單及其表現(xiàn)形式?jīng)]有什么不同，所以如何使用表單我覺得再拿出來說可能是畫蛇添足、毫無意義。不過再怎么樣也不能辜負(fù)大家...

    Charlie_Jade 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<