onClick可以工作，但是onDoubleClick在React组件上被忽略 [英] onClick works but onDoubleClick is ignored on React component

问题描述

我正在用React构建一个Minesweeper游戏，并希望在单击单元格或双击单元格时执行其他操作.当前，onDoubleClick功能将永远不会触发，显示来自onClick的警报.如果删除onClick处理程序，则onDoubleClick起作用.为什么两个事件都不起作用?是否可以在一个元素上同时存在两个事件?

I am building a Minesweeper game with React and want to perform a different action when a cell is single or double clicked. Currently, the onDoubleClick function will never fire, the alert from onClick is shown. If I remove the onClick handler, onDoubleClick works. Why don't both events work? Is it possible to have both events on an element?

/** @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的点击文档:

This is not a limitation of React, it is a limitation of the DOM's click and dblclick events. As suggested by Quirksmode's click documentation:

不要在同一元素上注册click和dblclick事件:不可能将单击事件与导致dblclick事件的单击事件区分开.

Don't register click and dblclick events on the same element: it's impossible to distinguish single-click events from click events that lead to a dblclick event.

有关最新文档，请参见 dblclick事件状态:

For more current documentation, the W3C spec on the dblclick event states:

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

A user agent must dispatch this event when the primary button of a pointing device is clicked twice over an element.

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

A double click event necessarily happens after two click events.

修改:

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

One more suggested read is jQuery's dblclick handler:

不建议将处理程序绑定到同一元素的click和dblclick事件.触发事件的顺序因浏览器而异，其中一些事件在dblclick之前收到两个click事件，其他事件仅收到一个.双击敏感度(被检测为两次单击的最大间隔时间)会因操作系统和浏览器而异，并且通常可由用户配置.

It is inadvisable to bind handlers to both the click and dblclick events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two click events before the dblclick and others only one. Double-click sensitivity (maximum time between clicks that is detected as a double click) can vary by operating system and browser, and is often user-configurable.

这篇关于onClick可以工作，但是onDoubleClick在React组件上被忽略的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！