javascript - クリックイベントの DOM 要素の分離

Question

検索結果を表示する Web サイトがあります。結果は全項目の見出し情報とともに表示されます。各検索結果の html は次のようになります。

<article class="search_result" onclick="location.href='#';" style="cursor: pointer;">

// Search result data

</article>

ご覧のとおり、どこでもクリックして結果をより詳細にアクセスできるようにしました

ただし、検索結果には、別の機能を実行するボタンも含まれています。

私が抱えている問題は、ボタンをクリックすると、ボタンと検索結果の両方がクリックイベントを受け取り、それに基づいて動作することです。ボタンがクリックされた場合、検索結果でもそれを処理したくありません。

どうすればこれを並べ替えることができますか?

score 2 · Accepted Answer

JavaScript イベントはデフォルトで DOM をバブルアップするため、子でトリガーされたイベントは親でトリガーされます。

これを防ぐには、イベントの伝播を停止する必要があります。

これは次の方法で行われます。

event.stopPropagation();

event通常、コールバック関数にパラメーターとして渡されることに注意してください。onclick=""(つまり、関数コールバックを取得するため、属性を使用しないでください)

javascript - クリック イベントの DOM 要素の分離