親要素のイベントをトリガ

Question

構造から防ぐネストされた要素：

.parent (has if/else to toggle on click) -> .child (has nothing)

<div class="parent">Parent 
    <div class="child">Child</div> 
</div> 

は、親要素が溢れコンテンツを隠し、クリックでその高さを切り替えることがスタイリングされています。ユーザーがクリックすると、親要素が展開されて子要素が表示されます。ユーザーが元のサイズに戻って子要素を隠すことなく、子要素をクリックできるようにします。私はトグルが親にしか起こらないようにしたい。

私は子要素が親要素のクリック可能領域にまだ含まれていることを認識していますが、除外する方法はありますか？

Answer 1

解決方法1：は、currentTargetとターゲットの比較：

$("#parentEle").click(function(e) { 
    if(e.target == e.currentTarget) { 
     alert('parent ele clicked'); 
    } else { 
     //you could exclude this else block to have it do nothing within this listener 
     alert('child ele clicked'); 
    } 
}); 

Fiddle

e.targetがイベントを開始した要素になります。
e.currentTargetは、このクリックイベントでparentEleになる（バブルアップする）場所になります。これは、これがリッスンしているものです。

同じ場合は、クリックが直接親にあることがわかります。

---

解決方法2：イベントはparentEleを打つ前に伝播を停止します。

他のオプションは、子要素上でのクリックがある場合、最初の場所でバブルアップからのイベントを防ぐためのものです。それは次のように行うことができます。

$("#parentEle").click(function(e) { 
    alert('parent ele clicked'); 
}); 
$("#parentEle").children().click(function(e) { 
    //this prevent the event from bubbling to any event higher than the direct children 
    e.stopPropagation(); 
}); 

Fiddle

---

2の主な違いは、最初のソリューションは、ちょうどこのリスナーでイベントを無視し、それがバブルアップキープできるようになるということです。これは、このparentEleの親がイベントを取得する必要がある場合に必要です。

2番目の解決策は、parentEleの直系子をバブリングすることからのクリックイベントをすべて停止します。したがって、parentEleの親にクリックイベントがあった場合、これらのイベントは決して見られません。

Answer 2

使用event.stopPropagation();：

$('#a').add('#b').click(fun1); 

function handler(event) { 
    event.stopPropagation(); 
    // now do your stuff   
}