3

以下のようにリスナーを書くと、

$('.parent').bind('click', function() {
//...
})

<div class="parent">
    <div class="children1"></div>
    <div class="children2"></div>
    <div class="children3"></div>
</div>

たとえば、 をクリックした場合、どの「子」DIVがクリックされたかchildren2を確認できますか?parent

ありがとう

4

4 に答える 4

8

e.targetはい、 （ハンドラをe引数として受け入れるように変更して）見ることができます。実際にクリックされた要素closestの最初の祖先を取得するために使用する可能性があります（それらの子に子孫がある場合）。divdiv

$('.parent').bind('click', function(e) {
    // Here, `e.target` is the DOM element where the click occurred
    var div = $(e.target).closest('div');
});

実例| ソース

または、子の 1 つがクリックされたときにのみハンドラーを起動する場合は、delegateまたはを介し​​てイベント委任を使用できonます。

$('.parent').delegate('div', 'click', function(e) {
    // Here, `this` is the child div that was clicked
});

// or

$('.parent').on('click', 'div', function(e) {
    // Here, `this` is the child div that was clicked
});

実例| ソース

引数の順序は、 (delegate明確にするために私が好む) とon(他の人が好むように思われる) では異なることに注意してください。

于 2013-03-02T11:24:53.117 に答える
3

ワーキングデモ

イベントのターゲットを見ることができます。ここでイベントは e.

$('.parent').bind('click', function(e) {
   console.log(e.target);
});
于 2013-03-02T11:26:01.253 に答える
0

あなたは使用する必要があります

$('.parent').on('click', 'div', function() {
// ...
});

.bind（）の代わりに.on（）を使用する必要があります。thisイベントハンドラでクリックされたdivを参照します。

于 2013-03-02T11:28:43.657 に答える
0

e.target.classNameイベントが発生した div のクラス名を取得します。

$('.parent').bind('click', function(e) {
   if(e.target.className.indexOf('children') != -1) { // <-- Perform function only if any child is clicked
     // do something
   }
})
于 2013-03-02T11:26:59.760 に答える