jquery - 下の絶対配置要素でクリックイベントを回避する

Question

親要素とその子の 2 つの要素があり、両方とも絶対配置されています。

要素ごとにクリック ハンドラーがありますが、子要素をクリックすると、その背後にある親要素もクリックをキャッチします。

親要素がクリック イベントを受け取らないようにするにはどうすればよいですか?

Answer 1

純粋な CSS ソリューションが必要な場合は、pointer-events: none;. これにより、マウスが親要素を完全に無視するようになるため、使用には注意してください。

また、これはIE または Opera ではサポートされていないことに注意してください。(または、少なくとも、HTML 要素ではなく、SVG のみ)

jQuery の代替手段は e.StopPropagation です。詳細については、こちらを参照してください。

Answer 2

JQuery を使用して、単純に親要素にpreventDefaultorを付けることができます。return false

$('#parent').click(function() {
    return false;
});

$('#child').click(function() {
    //do something
});