テーブル行内ボタンのクリックスルー(行クリック貫通)の原因と修正
React
フロントエンド
デバッグ
行全体(td)に onClick を付けたテーブルで、セル内の編集ボタンをホバー時のみ表示し非表示時に pointer-events: none にしていると、リロード直後など表示状態が切り替わる一瞬にクリックがボタンを素通りして td の行クリック(詳細パネル表示等)が発火する。修正は非表示時でもラッパーでクリックを受けて stopPropagation でセル内に吸収させ(pointer-events: none を外す)、保険として行クリック側も e.defaultPrevented を見て無視する。重要: preventDefault を使うと Radix などの Popover/トリガー開閉まで抑止してボタンが反応しなくなるため、ボタン側は stopPropagation のみにとどめる。