クリックした領域のIDは取得できますが、親IDは取得できませんか？

Question

How to get the id of the element clicked using jQueryこの質問には、クリックされた要素のIDを取得するという回答があります。

しかし、それはすべてのIDを与える。例えば

<div id="major"> 
    <div id="two"> </div> 
    </div> 

のdiv twoをクリックすると、私はtwoあるid一つだけを取得したいです。しかし、次のスクリプトも親IDを与えます。このため

$("body").on('click','div',function() 
    { 
     alert(this.id); 
    }); //It alerts the two and major. But i want two only. 

、目的私はそれは私が何を期待結果となりますいくつかの宣言されていない機能を入れてみました。例えば

$("body").on('click','div',function() 
{ 
    alert(this.id); 
    mkh(); #undeclared function 
}); 

はそれを行うための任意のinbuild方法がありますか。？ JS Fiddle

Answer 1

あなたは子要素に親event propagationを停止する必要があります。

$("body").on('click','div',function(e){ 
    e.stopPropagation(); 
    alert(this.id); 
    mkh(); #undeclared function 
}); 

Working Demo

Answer 2

これはあまりにも難しいことではありません。これを見る：

$("body").on('click','#two',function() 
    { 
     alert(this.id); 
    }); 

Answer 3

event.targetオブジェクトを使用してください。ターゲット要素を変更しない

$("body").on('click', 'div', function(e) { 
 
    alert(e.target.id); 
 
    e.stopPropagation(); 
 
});

#two { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: blue; 
 
} 
 
#major { 
 
    width: 500px; 
 
    height: 500px; 
 
    background: orange; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="major"> 
 
    <div id="two"></div> 
 
</div>

Answer 4

。

目的を果たすためにイベントオブジェクトを使用できます。 $(event.target)は、現在のターゲット要素を指定します event.stopPropagation()を使用すると、内部divをクリックするとイベントの伝播を停止します（bubbling）。そうしないと、

$("body").on('click','div',function(event) 
    { event.stopPropagation(); 
    var _getId = $(event.target).attr('id'); 
    alert(_getId); 

    }); 

チェックインナー&外側のdivの2つのアラートが表示されます。このjsfiddle