onClick工作，但在React组件上忽略了onDoubleClick

Question

我正在构建一个扫雷游戏与反应，并希望执行一个不同的行动，当一个细胞是单一或双击。当前，onDoubleClick函数将永远不会触发，将显示来自onClick的警报。如果我移除onClick处理程序，onDoubleClick就能工作。为什么这两件事都不起作用？是否可以在一个元素上同时设置这两个事件？

/** @jsx React.DOM */

var Mine = React.createClass({
  render: function(){
    return (
      <div className="mineBox" id={this.props.id} onDoubleClick={this.props.onDoubleClick} onClick={this.props.onClick}></div>
    )
  }
});

var MineRow = React.createClass({
  render: function(){
    var width = this.props.width,
        row = [];
    for (var i = 0; i < width; i++){
      row.push(<Mine id={String(this.props.row + i)} boxClass={this.props.boxClass} onDoubleClick={this.props.onDoubleClick} onClick={this.props.onClick}/>)
    }
    return (
      <div>{row}</div>
    )
  }
})

var MineSweeper = React.createClass({
  handleDoubleClick: function(){
    alert('Double Clicked');
  },
  handleClick: function(){
    alert('Single Clicked');
  },
  render: function(){
    var height = this.props.height,
        table = [];
    for (var i = 0; i < height; i++){
      table.push(<MineRow width={this.props.width} row={String.fromCharCode(97 + i)} onDoubleClick={this.handleDoubleClick} onClick={this.handleClick}/>)
    }
    return (
      <div>{table}</div>
    )
  }
})

var bombs = ['a0', 'b1', 'c2'];
React.renderComponent(<MineSweeper height={5} width={5} bombs={bombs}/>, document.getElementById('content'));

Answer 1

编辑：

我发现这不是反应0.15.3的问题。

原版：

对于React 0.13.3，这里有两个解决方案。

1.参考回调

注意，即使在双击的情况下，单击处理程序也将被调用两次(每次单击一次)。

const ListItem = React.createClass({

  handleClick() {
    console.log('single click');
  },

  handleDoubleClick() {
    console.log('double click');
  },

  refCallback(item) {
    if (item) {
      item.getDOMNode().ondblclick = this.handleDoubleClick;
    }
  },

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

module.exports = ListItem;

2.抵押债券

我有另一个使用lodash的解决方案，但由于复杂性，我放弃了它。这样做的好处是“点击”只被调用一次，而在“双击”的情况下则完全没有调用。

import _ from 'lodash'

const ListItem = React.createClass({

  handleClick(e) {
    if (!this._delayedClick) {
      this._delayedClick = _.debounce(this.doClick, 500);
    }
    if (this.clickedOnce) {
      this._delayedClick.cancel();
      this.clickedOnce = false;
      console.log('double click');
    } else {
      this._delayedClick(e);
      this.clickedOnce = true;
    }
  },

  doClick(e) {
    this.clickedOnce = undefined;
    console.log('single click');
  },

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

module.exports = ListItem;

在肥皂盒上

我理解这样的观点:双击并不容易被检测到，但无论好坏，它都是一种存在的范例，用户可以理解，因为它在操作系统中很流行。此外，这也是现代浏览器仍然支持的范例。在将其从DOM规范中删除之前，我的意见是，React应该支持与onClick一起运行的onClick支柱。不幸的是，他们似乎没有。

Answer 2

这不是反应的限制，而是DOM的click和dblclick事件的限制。正如Quirksmode的单击文档所建议的

不要在同一个元素上注册单击事件和dblclick事件:不可能区分单个单击事件和导致dblclick事件的单击事件。

有关更多最新文档，W3C规范关于事件的声明如下：

当指向设备的主按钮在元素上被两次单击时，用户代理必须分派此事件。

双击事件必然发生在两个单击事件之后。

编辑

另一个建议阅读是jQuery的处理程序

不建议将处理程序绑定到同一元素的click和dblclick事件。触发的事件顺序因浏览器而异，有些在dblclick之前收到两个单击事件，另一些只接收一个。双击灵敏度(双击检测到的两次点击之间的最长时间)可能因操作系统和浏览器的不同而不同，而且通常是用户可配置的。

Answer 3

所需的结果可以通过提供一个非常轻微的延迟触发正常的点击动作，这将被取消时，双击事件将发生。

  let timer = 0;
  let delay = 200;
  let prevent = false;

  doClickAction() {
    console.log(' click');
  }
  doDoubleClickAction() {
    console.log('Double Click')
  }
  handleClick() {
    let me = this;
    timer = setTimeout(function() {
      if (!prevent) {
        me.doClickAction();
      }
      prevent = false;
    }, delay);
  }
  handleDoubleClick(){
    clearTimeout(timer);
    prevent = true;
    this.doDoubleClickAction();
  }
 < button onClick={this.handleClick.bind(this)} 
    onDoubleClick = {this.handleDoubleClick.bind(this)} > click me </button>