jquery - jQuery .on() 选择器

Question

我正在使用 jQuery 的 on() 函数将事件绑定到容器 div 并提供“.myItem”选择器。

$container.on('click', '.myItem', { me: this }, MyClass.prototype.onItemClick);

除了没有“myItem”类的子元素仍然导致事件触发之外，一切都运行良好。这是正确的行为吗？选择器将匹配具有“myItem”类及其子级的元素？

<div class="myItem">
   <div>My Label</div>
</div>

根据我的实验，<div>上述两个 s 都会触发该事件。我想要的是单击子 div 以冒泡到具有类名的父 div，然后为该元素触发事件。即在事件处理程序内部，event.target应始终引用.myItem元素。

这可能吗？

score 2 · Accepted Answer

我想单击“我的标签”div 来触发事件，但会冒泡，以便 event.target 是“myItem”div。

在这种情况下，myItem不会event.target。会的event.currentTarget。有关更多详细信息，请参阅我提交的有关该问题的问题。

score 0 · Accepted Answer

为了通过单击获得该功能，您需要停止在子节点上传播 click 方法，以防止它们冒泡到它们的父节点。

$('.myItem *').on('click', function(evt) {
    event.stopPropagation();
});

score 0 · Accepted Answer

单击子对象也是单击父对象，因此单击子对象将触发父对象的单击处理程序，除非您处理子对象中的单击并停止传播事件。

但是，当像您一样使用委托事件处理时，停止事件传播是有限制的。在事件已经传播到您附加委托事件处理程序的容器之前，您的事件处理程序甚至不会触发。因此，此时停止通过容器下方的元素进行传播为时已晚（因为传播已经发生）。您可以在容器之外停止传播。

如果您只想在标签中单击，您可以执行以下操作：

$container.on('click', '.myItem label', function() {
    // your code here
});

这将使用委托事件处理并将点击隔离到标签中的那些点击。

如果您想要该.myItem单击处理程序中的父对象，则可以像这样获取它：

$container.on('click', '.myItem label', function() {
    var item = $(this).closest('.myItem');
});

3 回答 3