防止双击被解释为两次单击? [英] Prevent a double-click being interpreted as two single-clicks?

问题描述

我有以下相当简单的React类:

I have the following rather simple React Class:

import React from "react"

export default class DoubleClick extends React.Component {  

  constructor(props) {
    super(props);
    this.state = {
    };
    this.handleClick = this.handleClick.bind(this);
    this.handleDoubleClick = this.handleDoubleClick.bind(this);
  }
  handleClick() {
    console.log("Click");
  }
  handleDoubleClick() {
    console.log("Double Click");
  }
  render() {
    return (
      <div style={{backgroundColor: 'pink'}}>
          <div onClick={this.handleClick}> 
            <span onDoubleClick={this.handleDoubleClick}> Hello </span> 
            <span onDoubleClick={this.handleDoubleClick}> world. </span>
          </div>
      </div>
    );
  }
} 

当某人单击外部div时，我想调用handleClick；当某人双击任何内部跨度时，我想调用handleDoubleClick，而不是外部div的handleClick也是

When somebody single-clicks on the outer div, I want to call handleClick, when somebody double-clicks on any of the inner spans I want to call handleDoubleClick, but not the handleClick for the outer div as well.

但是，每当我双击时，都会调用handleDoubleClick()，但也会调用 handleClick，即两次.

However, whenever I double-click, handleDoubleClick() is called, but handleClick is also called, namely twice.

我只想在单击时才呼叫handleClick()，但双击不可以吗?

I would like to call handleClick() only when I click, but do not double-click - is this possible?

推荐答案

我有一个HOC，可用来估算您要寻找的内容:

I have a HOC that I use to approximate what you're looking for:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class DoubleClick extends Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
    this.onDoubleClick = this.onDoubleClick.bind(this);
    this.timeout = null;
  }

  onClick(e) {
    e.preventDefault();

    if(this.timeout === null) {
      this.timeout = window.setTimeout(() => {
        this.timeout = null;
        this.props.onClick();
      }, 300);
    }
  }

  onDoubleClick(e) {
    e.preventDefault();
    window.clearTimeout(this.timeout);
    this.timeout = null;
    this.props.onDoubleClick();
  }

  render() {
    const { onClick, onDoubleClick, children, ...childProps } = this.props;
    const props = Object.assign(childProps, { onClick: this.onClick, onDoubleClick: this.onDoubleClick });
    return React.cloneElement(children, props);
  }
}

DoubleClick.propTypes = {
  onClick: PropTypes.func.isRequired,
  onDoubleClick: PropTypes.func.isRequired,
  children: PropTypes.element.isRequired,
};

像这样使用:

<DoubleClick onClick={clickHandler} onDoubleClick={doubleClickHandler}>
  <button>Click or double click me</button>
</DoubleClick>

收到第一次点击后，它将设置300毫秒的超时时间.如果在300毫秒内未收到第二次点击，则会调用onClick属性中的函数.如果在300毫秒内收到第二次点击，则会调用onDoubleClick道具中的函数，并且取消超时，因此onClick不会触发.

When the first click is received, it sets a 300ms timeout. If no second click is received within 300ms, the function in the onClick prop will be invoked. If a second click is received within 300ms, the function in the onDoubleClick prop will be invoked, and the timeout is canceled so the onClick does not fire.

不用说，这不是一个完美的近似值，但是我发现它在实践中是足够令人满意的用户体验.

Needless to say, this is an imperfect approximation, but I've found it to be a sufficiently satisfying user experience in practice.

这篇关于防止双击被解释为两次单击?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！