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

时间: 2019-08-13阅读: 25标签: 事件

上午楼主遇到一个需要处理双击事件的需求,在这里介绍下如何在触发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


链接: http://www.fly63.com/article/detial/4663

jquery的on绑定点击事件执行两次的解决办法

jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的alert会执行两次,相应地数组删除也执行两次,具体代码如下

js事件委托(事件代理)

js中事件冒泡我们知道,子元素身上的事件会冒泡到父元素身上,事件代理就是本来加载子元素身上的事件,加在其父元素身上,其问起产生了,那么多的子元素怎么区分事件本应该是哪个子元素的。 答案就是event对象记录的事件源

vue事件修饰符

在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符,从而转变为使用 change事件进行同步;如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:

vue.js事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。

对JS事件机制的深入理解

发生一个事件时,事件及事件处理句柄会被放入浏览器的事件队列,事件可归为以下几类:浏览器事件:window.load、document.DomContentLoaded等,网络请求事件:ajax、websocket

js事件概念和事件监听

JavaScript使我们有能力创建动态页面,网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。我们可以认为事件是可以被JavaScript侦测到的一种行为。HTML元素大都包含了自己的默认行为,例如:超链接、提交按钮等。

vue中的事件修饰符(.stop、.prevent、.self、.capture、.once)

使用.stop阻止事件的冒泡行为。使用.prevent阻止事件的默认行为。使用.self实现只有点击当前元素才会触发事件处理函数。使用.capture实现捕获触发事件的机制,即从外部事件开始执行。使用.once实现事件的触发次数为一次。

网页浏览器缩放监听

这里的缩放不是指resize事件(改变浏览器窗口大小),而是指浏览器本身的缩放功能,一般使用以下方式进行缩放:ctrl配合鼠标滚轮;ctrl配合-/+/0进行缩放。

原生JS实时监听input框输入值

利用原生JS实时监听input框输入值,原生JS中可以使用oninput,onpropertychange,onchange,oninput,onpropertychange,onchange的用法

JavaScript自定义事件

系统内发生的动作或发生的事情,系统会在事件出现时触发某种信号,提供一个自动加载某种动作的机制。事件三要素:事件源(触发事件的元素也就是你是要对什么东西进行操作);事件(事件的触发方式也就是你要做什么实现所要的交互效果)

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全