クリックが親に伝達されないようにする

特定の要素をクリックすると、関数を呼び出す必要があります。その子のいずれかがクリックされたとき、私はではなく、は関数を呼び出すことを望んでいます。クリックが親に伝達されないようにする

私はではありません。 jQueryを使用しています。

例：私は ".fullscreenオーバーレイ" がクリックされたときに、私のcloseModal()関数を呼び出したい

<div class="fullscreen-overlay"> <div class="card"> ... </div> </div>

ではなく、 ".card"、または任意：

私はモーダルを作成のコンテンツがクリックされます。

jsfiddle：

https://jsfiddle.net/5kuwmf9s/

研究：

私は、このためのCSS属性があった宣誓ていたかもしれないが、グーグルで、そのためのSOに検索した後、私ができます見つけられない/それを想像しているかもしれない。 "ポインタイベント"は、バブリングするのではなく、ターゲット要素上で停止させます。

Theres another answerは、イベントを捕捉し伝播を停止するすべての子にイベントハンドラを付けることを示唆しています。私の子供たちはダイナミックなので、ハンドラーをつけたままにすることは複雑になります。

2016-09-05 Don P

CSS 'Z-index'はあなたのソリューションです。 – SaidbakR

Nah、z-indexで解決できない場合でも、イベントは引き続きDOMに伝播します。 –

「カード」をオーバーレイdivの外に置くことはできませんか？ –

あなたは彼らが現在の要素が、イベントの最初の源であった1である場合にのみ等しくなるイベントのtargetとcurrentTarget

を比較している場合があります：

function handleClick(e){ 
    if (e.target === e.currentTarget) { 
    alert('clicked!'); 
    } 
}

参考文献：

2016-09-05 03:07:55 zerkms

を示し、この要素

にあなたの「.fullscreen-オーバーレイ」とバインドイベントとしての要素とスタイル、それを使用してみてください

2016-09-05 03:04:00

申し訳ありませんYanjun - 私はあなたが言っていることを理解できません:( –

多くの方法があります、答えのzerkmsは私の答えの3番目です。 –

答えて