防止双击被解释为两次单击？

Question

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

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，但handleClick也不想调用外部 div 的 。

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

handleClick()我只想在单击时拨打电话，但不要双击 - 这可能吗？

Answer 1

我有一个 HOC，我用它来近似您正在寻找的内容：

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 毫秒的超时。onClick如果 300 毫秒内没有收到第二次点击，则会调用 prop中的函数。如果在 300 毫秒内收到第二次点击，则将调用 prop 中的函数onDoubleClick，并取消超时，因此onClick不会触发。

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