var Grandpa = React.createClass({

    getInitialState: function() {

        return {clickTime: '-'};

    },

    onClick: function(event) {

        this.setState({clickTime: (new Date().getTime())});

    },

    render: function() {

         return <div onClick={this.onClick}>

             <Dad  />

             <p>Grandpa Clicked At: {this.state.clickTime}</p>

         </div>;

    }

});

​

var Dad = React.createClass({

​

    getInitialState: function() {

        return {clickTime: '-'};

    },

    onClick: function(event) {

        event.stopPropagation();

        event.nativeEvent.stopPropagation();

        this.setState({clickTime: (new Date().getTime())});

    },

    render: function() {

        return  <div onClick={this.onClick}>

            <Son />

            <p>Dad Clicked At: {this.state.clickTime} AND STOP event propagation</p>

          </div>;

    }

});

​

​

var Son = React.createClass({

    getInitialState: function() {

        return {clickTime: '-'};

    },

    onClick: function(event) {

​

        this.setState({clickTime: (new Date().getTime())});

    },

    render: function() {

        return <div>

          <button onClick={this.onClick}>Click me</button>

          <p>Son Clicked At: {this.state.clickTime}</p>

        </div>;

    }

});

​

​

React.render(<Grandpa/>, document.getElementById('container'));

​

$(document).on('click', function(){

    $('#docClickTime').text(new Date().getTime());

});