javascript - onClick可以工作，但是onDoubleClick在React组件上被忽略

我正在用React构建一款Minesweeper游戏，并希望在单击单元格或双击单元格时执行其他操作。当前，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'));

最佳答案

这不是React的限制，而是DOM的click和dblclick事件的限制。如Quirksmode的click documentation所建议:



有关更多当前文档， dblclick event上的W3C规范指出:



两次单击事件之后必然会发生一次双击事件。

编辑:

建议阅读的另一本书是jQuery的 dblclick handler: