1

私には があり、divその中にdiv子img要素があります。と の両方divにimg独自の javascript がありclick handlerます。

私の目的は、 をクリックしたときにimg、 のみimg clickがトリガーされるようにすることです。しかし、現在 は のdiv click handler前に応答していimg click handlerます。

例を次に示します: http://jsfiddle.net/5j73w/

position: relative親が犯人かどうかはわかりません。しかし、それは必須のスタイルです。z-indexforも試しましたimgが、役に立ちませんでした。

前もって感謝します！

4

2 に答える 2

4

jQuery 1.7+ を使用しているため、非推奨.live()を置き換えます。.on()

$('#parent > img').on('click', function(e) {

フィドル

または、イベント委任が必要な場合 (たとえば、コンテンツを に動的に追加する場合#parent):

//run this line when #parent is in the DOM
$('#parent').on('click', '> img', function(e) {

フィドル

.liveイベントをドキュメントまでバブルしてから、指定されたセレクターがターゲット要素と一致するかどうかを確認します。それ以降は、イベントの伝播を停止できなくなります。ドキュメントから：

イベント ハンドラーでの呼び出しevent.stopPropagation()は、ドキュメントの下部にアタッチされたイベント ハンドラーを停止するのに効果的ではありません。イベントはすでに に伝播されていdocumentます。

また、「親が優先される」という質問に答えるには、そうではありません。を呼び出すと.live、実際にはハンドラが にアタッチされますdocument。

この場合、.click(function(){})(jQuery 1.7+ では の短縮形である) を介して.on('click'[, null], function(){})アタッチされたハンドラーは、 にアタッチされたハンドラーの前に実行documentされます。これは、予想されるイベント伝播バブリング動作です。

于 2012-08-26T06:46:20.463 に答える
2

以下を実行することで修正できました。

$('#parent').click(function(e)
{
    console.log("parent click");
});


$('#child').click(function(e)
{
    console.log("child click");
    e.stopPropagation();
});

</p>

これがフィドルです。

于 2012-08-26T06:45:43.980 に答える