This is the structure of my jsx.
<a href="/some/link/" title="some time">
<div>
Some big Enough Content
</div>
<button className="card-detail__link right-price__link" onClick={this.handleCheckRightPriceClick}>
Check Right Price
</button>
</a>
a tag wraps around div tag which has enough content to take considerable space and a button tag which has some onClick event listener attached to it.
The Desirable behavior is that on the click of anywhere inside div tag, the link in a tag should be opened but if I click on button, only its click handler should be called and the link should not be opened.
To achieve this behavior, I called event.stopPropagation() inside the button's click handler, but the link still opened. Then I removed call to stopPropagation, and called preventDefault, which to my utter surprise worked.
Now according to this documentation, the default type of button is submit, which if present inside a form tag will submit the data to server. But in my jsx, there are no form tags.
Handler Implementation:
handleCheckRightPriceClick = event => {
// Even if I remove the call to stopPropagation, it doesn't effect the output
event.stopPropagation();
// IF I remove call to preventDefault, the link is opened.
event.preventDefault();
// does some stuff
};
My Thinking was that calling stopPropagation should have worked instead of preventDefault, as it should stop the event bubbling and the event never reaches the anchor tag
