コンテナのみ.click（）イベントをバインドする方法はありますか

は、私は、ユーザーのエントリがアコーディオンスタイルを開きたいが、私は赤いボックス内の他の要素をクリックした場合でも、.click()イベントがトリガされます -コンテナのみ.click（）イベントをバインドする方法はありますか

私がしたいなど、テキスト、画像、「外側」の空白だけがイベントを引き起こすようにしてください。

どうすればよいですか？

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="box" style="width:80%;background:red;"> 
 
    <table> 
 
    <tr> 
 
     <td><img src="http://i.imgur.com/NaCmGyX.jpg" style="width:50px;height:50px;border-radius:50%;"></td> 
 
     <td><b>John McDerpenstein</b></td> 
 
     <td><p> 
 
     A blurb goes here 
 
     </p></td> 
 
    </tr> 
 
    </table> 
 
</div>

fiddle

出典

2016-07-14 McDerp

JSFiddleと一緒にあなたのコードを入力してください。 –

イベントは親要素に伝播しています。 – Andreas

テスト用にスクリプトを非常に簡単に修正することをお勧めします： 'console.log（e）'を 'console.log（ 'test'）'のように変更してください。そうでなければ（ブラウザを含む）それは少しイライラしています。 –

あなたはそれがis()を使用して直接#box要素だったかどうかを確認するために、イベントのtargetプロパティを確認することができます。

$('#box').click(function(e) { 
    if ($(this).is(e.target)) 
     console.log(e); 
});

Updated fiddle

出典

2016-07-14 14:49:55

<html> 
<body> 
<div id="box" style="width:80%;background:red;"> 
    <table> 
    <tr> 
     <td><img src="http://i.imgur.com/NaCmGyX.jpg" style="width:50px;height:50px;border-radius:50%;"></td> 
     <td><b>John McDerpenstein</b></td> 
     <td><p> 
     A blurb goes here 
     </p></td> 
    </tr> 
    </table> 
</div> 
<script src="jquery-1.12.3.min.js"></script> 
<script> 
$('img').click(function(e) { 
    console.log(e); 
}); 
</script> 

</html>

出典

2016-07-14 14:49:44 Ray

外側の空白は何ですか？ – Ray

イメージを意味しましたか？ – Ray

回答する前に質問をよくお読みください。あなたのコメントであなたが尋ねた質問は、元の質問自体をチェックすることによって答えることができます。 –

e.target.idをチェックして、希望の外箱の特定のidと一致するかどうかを確認してください。例の下：あなたが親コンテナにイベントを追加したい場合は

$('#box').click(function(e) { 
 
    if (e.target.id === "box") 
 
    console.log('click'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="box" style="width:80%;background:red;">this is the outer box 
 
    <table> 
 
    <tr> 
 
     <td><img src="http://i.imgur.com/NaCmGyX.jpg" style="width:50px;height:50px;border-radius:50%;"></td> 
 
     <td><b>John McDerpenstein</b></td> 
 
     <td><p> 
 
     A blurb goes here 
 
     </p></td> 
 
    </tr> 
 
    </table> 
 
</div>

出典

2016-07-14 14:50:23

あなたはクリックイベントを必要としないすべての子要素に伝播を停止する必要があります。

例：#box以来

をクリックし、ボックスには、画像にIDを与え、一例では、伝搬に

$('#imageID').click(function(e){ 

e.stopPropagation(); 

})

を停止する必要がありますあなたのコンテナ

ありました上記の画像をクリックすると何も起こりませんが、赤いコンテナをクリックするとイベントが記録されます。

出典

2016-07-14 14:56:48 KpTheConstructor

最良の方法は、クリックが子で行われている場合、イベントを防ぐためです：

$('#box').click(function(e) { 
    if (!$(this).is(e.target)) { 
     return e.preventDefault() 
    } 

    // code here (or nothing, href="" action) 

});

出典

2016-07-14 15:33:27 Arthur

コンテナのみ.click（）イベントをバインドする方法はありますか

答えて

関連する問題