如何仅将容器绑定到.click（）事件？
[英]How to bind a .click() event only the container?
问题描述
I want the user entry to open up accordion-style, but a .click() event is triggered even if I click on any other element inside the red box - the text, the image, etc. 
我希望用户输入打开手风琴式，但即使我点击红色框内的任何其他元素 - 文本，图像等，也会触发.click()事件。
I'd like to only have the "outer" whitespace cause the event to trigger. 我只想让“外部”空格导致事件触发。
How do I accomplish this? 我该如何做到这一点？
$('#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>
5 个解决方案
解决方案1
0 2016-07-14 14:49:44
<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>
解决方案2
0 已采纳 2016-07-14 14:49:55
You can check the target property of the event to see if it was the #box element directly by using is() : 您可以使用is()检查事件的target属性以查看它是否是#box元素：
$('#box').click(function(e) {
if ($(this).is(e.target))
console.log(e);
});
解决方案3
0 2016-07-14 14:50:23
Just check the e.target.id to see if it matches the specific id of the outer box you want. 只需检查e.target.id ，看它是否与您想要的外盒的特定id匹配。 Example below: 示例如下：
$('#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>
解决方案4
0 2016-07-14 14:56:48
If you want to add the event to the parent container you will have to stop the propagation on all the child elements that will not need a click event . 如果要将事件添加到父容器，则必须停止不需要单击事件的所有子元素的传播 。
Example : 示例：
since #box has the click and box is your container 因为#box有点击，而盒子就是你的容器
you will need to give image an id and stop the propagation 你需要给图像一个id并停止传播
$('#imageID').click(function(e){
e.stopPropagation();
})
With the example above when you click the image nothing will happen , but if you click the red container then your event will log. 使用上面的示例，当您单击图像时，不会发生任何事情，但如果您单击红色容器，则您的事件将记录。
解决方案5
0 2016-07-14 15:33:27
The best way is to prevent the event if the click is done on child: 最好的方法是在对孩子进行点击时阻止该事件：
$('#box').click(function(e) {
if (!$(this).is(e.target)) {
return e.preventDefault()
}
// code here (or nothing, href="" action)
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.