Button inside a span, both have an event. If I click the button, the span event also starts-CodePudding

<**span** onClick={'event example 1'}>
  content example 1
  <**button** onClick={'event example 1'}>
    content example 2
  </**button**> 
</**span**>

How can I press the button without also involving the span event? It's possible?

CodePudding user response：

there are two extra properties to handle this issue: event.preventDefault event.stopPropogation

in your handler you can specify first attribute - event

onClick(function(event){
    event.preventDefault();//default handler shouln't be executed
    event.stopPropogation();//stop with executing any other event hadlers    
});

CodePudding user response：

Events bubble by default. So the target is the element that triggered the event (e.g., the user clicked on).

If u face some ambiguity while stopping the event bubbling via stopPropogation(preferred) u can this structure.

// Dont forget to pass event (e).
if (e.tagName.toLowerCase() === 'button') {
  conosole.log('CLICK');
}