デリゲートを使用しているときにイベントの伝播を停止する方法はありますか？

Question

.bindを使用して子イベントと親イベントをバインドすると、子イベントはイベントの伝播を停止してfalseを返します。しかし、私がデリゲートを使用すると、falseを返します。イベントの伝達を停止しません。

http://jsfiddle.net/J3EAQ/

HTML：

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

JS：

$('.parent').delegate('.child','click',function(e){ 
    alert('child click'); 
    return false; 
}); 
$('.parent').bind('click',function(e){ 
    alert('parent click'); 
}); 

Answer 1

e.stopPropagation()はこの場合は機能しません。代わりにe.stopImmediatePropagation()を使用してください。ここをクリックfiddle

Answer 2

あなたがいないfalseを返すことで、伝播を防ぐためにe.stopPropagation()を使用する必要があります。

return falseは技術的に2つのものです。 1）デフォルト動作を防止し、2）伝搬を停止する。 eのメソッド呼び出しに切り替えて、問題が解決するかどうか確認してください。

Answer 3

なぜ2つのクリックハンドラあなたは1を持つことができたとき：

$('.parent').click(function (e) { 
    if ($(e.target).is('.child')) { 
     alert('child click'); 
    } else { 
     alert('parent click'); 
    }  
}); 

ライブデモ：http://jsfiddle.net/J3EAQ/2/

---

このパターンの一般化：

$(element).click(function (e) { 
    if (e.target === this) { 
     // this element was clicked directly 
    } else { 
     // this element was NOT clicked directly 
     // a descendant of this element was clicked 
    }  
}); 

---

別個のハンドラ？

$('.parent').click(function (e) { 
    if (this ==== e.target) { 
     parentClicked.call(e.target, e); 
    } else { 
     childClicked.call(e.target, e); 
    }  
}); 

function childClicked(e) { 
    // child click handler 
} 

function parentClicked(e) { 
    // parent click handler 
} 

Answer 4

あなたはいつもイベントが伝播されていないe.stopPropagation()

Answer 5

使用することができます。 Clickハンドラを.parentにバインドしていて、.parentをクリックしている場合

Answer 6

私にとっては、他のクリックイベントによってトリガーされたくないクリックハンドラーのクリックターゲットのクラス名をチェックすることでした。このようなもの。

if(e.target.className.toString().indexOf("product-row") > -1){ 
     // Only do stuff if the correct element was clicked 
    }