React 中单击和双击事件冲突的解决

[shuangmianxiaoQ]

在业务需求中遇到这样的场景，对一个元素同时添加单击和双击事件，发现两个事件会有冲突，导致无法区分单击和双击事件，下面提供两种解决方案：

1. 通过设置延时来实现

let count = 0;

class App extends Component {
  handleClick = () => {
    count++;

    setTimeout(() => {
      if (count === 1) {
        // 单击事件处理
      } else if (count === 2) {
        // 双击事件处理
      }

      count = 0;
    }, 300);
  }

  render() {
    return (
      <div onClick={this.handleClick} />
    )
  }
}

2. 借助防抖函数实现

let clickTasks = []; // Array of debounced click events

class App extends Component {
  handleClick = () => {
    const task = _.debounce(() => {
      // 单击事件处理
      clickTasks = [];
    }, 300);
    clickTasks.push(task);
    task();
  }

  handleDoubleClick = () => {
    if(clickTasks.length > 0) {
      _.map(clickTasks, task => task.cancel());
    }
  // 双击事件处理
  }

  render() {
    return (
      <div onClick={this.handleClick} onDoubleClick={this.handleDoubleClick} />
    )
  }
}