【JavaScript】イベント伝播を停止するevent.stopPropagation()

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;