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

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在使用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和dblclick事件：不可能将单击事件与导致dblclick事件的单击事件区分开。

有关更多最新文档，该dblclick事件的W3C规范指出：

当定点设备的主按钮在某个元素上单击两次时，用户代理必须调度此事件。

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

：

建议阅读的另一本书是jQuery的dblclick处理程序：

将处理程序绑定到同一元素的click和dblclick事件都是不可取的。触发事件的顺序因浏览器而异，其中一些事件在dblclick之前收到两个click事件，其他事件仅收到一个。双击灵敏度（检测为两次单击之间的最长间隔时间）可能因操作系统和浏览器而异，并且通常可由用户配置。

以上是 onClick可以工作，但是onDoubleClick在React组件上被忽略 的全部内容， 来源链接： utcz.com/qa/428068.html

回到顶部