onClick works but onDoubleClick is ignored on React component

Question

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')); 

Answer 1

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:

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.

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.

Edit:

One more suggested read is jQuery's dblclick handler:

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.