I having issue in react event bubbling. I have pair with icon inside span element and somewhere upper section element, like this example below:
const App = () => {
const onClick = (event) => alert(event.target.nodeName);
return (
<section onClick={onClick}>
<span>
<i className="fas fa-reply"></i> Click me
</span>
</section>
);
};
After click on i tag im waiting for event bubble - to call onClick atleast twice (1st for i, 2nd for span). But it never happens. Could you please tell my why?
I know possible solution - to set pointer-events on i to none, but im more curious why event not bubbling.
Thank you
I saw the code you mentioned in the question.
Firstly you didn't added onClick event to
<i/>
tag. First add onClick in it then try to add for span as well. As of now I see you added onClick for section only.
Thank you. Due deep level of component with
<span>and<i>i've decided to attach onClick listener on top of that to filter clicks. Is there any explanation without modifying span and icon elements?I think u r confused or may be not clear. Bubbling only occurs when child has onClick then it's parent also has onClick then grand parent also has onClick. Only then bubbling event occurs
Yeah, yesterday i figured it out, after 5th times reading js bubbling event page.. I dont know why i thought that bubbling works when top parent listening to events and will catch all hierarchy bubbling events