是否可以检查单击了哪个"children" DIV

Question

如果我像下面这样写侦听器，

$('.parent').bind('click', function() {
//...
})
<div class="parent">
    <div class="children1"></div>
    <div class="children2"></div>
    <div class="children3"></div>
</div>

例如我点击了children2，是否可以检查parent下的哪个"children"DIV被点击了?

谢谢

Answer 1

是的，您可以查看e.target(更改处理程序以接受e作为参数)，可能使用closest来获取单击实际元素的第一个div祖先(以防那些子div s有后代)。

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

实例|来源

或者，如果您仅希望在单击其中一个子事件时触发处理程序，则可以通过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(似乎其他人都更喜欢)之间的参数顺序不同。

Answer 2

工作演示

您可以查看事件的目标。这里的事件是e。

$('.parent').bind('click', function(e) {
   console.log(e.target);
});

Answer 3

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
   }
})

Answer 4

你应该使用

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

.on()应该代替.bind()。this在事件处理程序中引用被单击的div。