jquery - 是否可以检查单击了哪些“子”DIV

Question

如果我按如下方式编写侦听器，

$('.parent').bind('click', function() {
//...
})

<div class="parent">
    <div class="children1"></div>
    <div class="children2"></div>
    <div class="children3"></div>
</div>

例如我点击children2了，是否可以检查点击了哪个“儿童”DIV parent？

谢谢

Answer 1

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

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

实例| 来源

或者，如果您只希望在单击其中一个孩子时触发处理程序，您可以通过delegateor使用事件委托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
});

实例| 来源

请注意，args 的顺序在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。