javascript - クリックされているフォームの下の要素のイベントをトリガーするマウス クリック

Question

以下に示すように、ユーザーが画像を削除できるように、画像のサムネイルの上に送信ボタン (フォーム) を置いています。

サムネイル (img 要素) には、画像をフルサイズで表示するポップアップをトリガーする onclick イベントもあります。残念ながら、「x」ボタン (フォームを送信) をクリックすると、下のサムネイル画像の onclick イベントもトリガーされ、ページがリダイレクトされる前にユーザーにポップアップが表示されます。どうすればこれを防ぐことができますか?

追加情報

ボタンのcssは次のとおりです。

.delete_image_button
{
    position:               absolute;
    top:                    0px;
    right:                  0px;
    z-index:                1;
}

Answer 1

jQuery停止伝播機能を使用できます。これにより、イベントがブブリングするのを防ぎます

Answer 2

イベントが親ノードに伝播するのを防ぐために、stopPropagation メソッドを使用できます。

$(element).click(function(event){
     event.stopPropagation();
});