Question

如果我按如下方式编写听众，

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

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

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

由于

Answer 1

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

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

Live Example | Source

或者，如果仅希望在单击其中一个子项时触发处理程序，则可以通过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
});

Live Example | Source

请注意，args的顺序在delegate（我更喜欢清晰度）和on（它似乎是其他人都喜欢的）之间有所不同。

Answer 2

<强> Working Demo

您可以查看活动的目标。这里的事件是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。

是否可以检查点击了哪个“儿童”DIV

4 个答案: