tableのtrをクリックでイベントを実行するようにしていて、trの中のtdのspanをクリックで別のイベントを実行したかったが、trのクリックイベントも実行してしまう。 その場合、親要素のtrのイベント伝播を停止する処理についてメモ。
event.stopPropagation()
を使用したらできた。
import React from 'react'; const TableComponent = () => { const handleTrClick = (e) => { console.log('TR clicked'); // TRに対する処理 }; const handleSpanClick = (e) => { console.log('Span clicked'); e.stopPropagation(); // ここでイベント伝播を停止 // Spanに対する処理 }; return ( <table> <tbody> <tr onClick={handleTrClick}> <td> <span onClick={handleSpanClick}>Click Me!</span> </td> <td> Another cell </td> </tr> {/* 他の行 */} </tbody> </table> ); }; export default TableComponent;