Event bubbling
lastmod 2025-03-26created 2025-03-261 edits
When the parent element's event fires instead of the inner element's event
In the code below, clicking the inner svg also triggers the parent tr's onClick because of event bubbling.
<tr onClick={() => console.log('TR clicked')}>
<td>
<svg
onClick={(e) => {
console.log('SVG clicked');
}}
>
{/* SVG content */}
</svg>
</td>
</tr>
You need to stop the event propagation with e.stopPropagation():
<tr onClick={() => console.log('TR clicked')}>
<td>
<svg
onClick={(e) => {
e.stopPropagation(); // 이벤트 전파 중단
console.log('SVG clicked');
}}
>
{/* SVG content */}
</svg>
</td>
</tr>