Clickable component inside a parent clickable component in html

Question

I have a Clickable table row on clicking of which I am performing some operations and inside that row I have a button with some onClick event happening on that.

 <tr onClick={this.update} style={{cursor:'pointer'}}>
                <td className="col-sm-1 col-md-1 text-center"><strong>Some content</strong></td>
                <td className="col-sm-1 col-md-1">
                    <button type="button" className="btn btn-danger pull-right"
                    onClick={this.removeData}>
                    <span className="glyphicon glyphicon-remove"></span>
                    </button>
                </td>
 </tr>

But whenever I try to click on button inside tr onClick of tr gets fired. I want to perform action based on the click of button also.

I suggest you give a look at http://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing — Domino, Dec 08 '15 at 19:05
Understood what needs to be done after reading above link @JacqueGoupil — WitVault, Dec 08 '15 at 19:30

score 3 · Accepted Answer · answered Dec 08 '15 at 19:29

Please, take a look at this JS Fiddle example http://jsfiddle.net/ric/02ofa45c/

'$(document).ready(function () {
  $('.outer').on('click', function () {
    console.log('outer');
  });

  $('.inner').on('click', function (e) {
    e.stopPropagation();
    console.log('inner');
  });
});

score 2 · Answer 2 · answered Dec 08 '15 at 18:59

2

Use event.stopPropagation() as the first statement inside your removeData handler for the button. And make sure the event is available as a function argument.

answered Dec 08 '15 at 18:59

Robusto

31,447
8
56
77

Got it. In React event handlers have instances of `SyntheticEvent`, a cross-browser wrapper on which I will call `stopPropagation()` – WitVault Dec 08 '15 at 19:40

score 2 · Answer 3 · answered Dec 08 '15 at 19:36

Add event.stopPropagation() inside the onclick event of the child. This will prevent the child event function propagating to the parent event.

In the JS or JQuery function :

function parentEvent(){
       //perform some action
}

function childEvent(){
       event.stopPropagation()
       //perform some other action
}

This will hopefully solve your problem

Clickable component inside a parent clickable component in html

3 Answers3