aBloomer aBloomer - 3 months ago 11
React JSX Question

How to only trigger one onClick function when inside a component also with onClick event?

Below is the sample code....

<div onClick={this.handeAAAClick}>
<img onClick={this.handleLinkClick}/>
</div>


When I click the div and it will trigger handleAAAClick event, however, when I only click on img, and it will trigger both click event, what I want is only to trigger handleLinkClick.

How should I do that?

Answer

The handleLinkClick will get a parameter event.On this parameter there is a stopPropagation method.You need to call it.

function handleLinkClick(e){
   e.stopPropagation();
}
Comments