Javascript 是否在应用选择器之前激发jQuery事件侦听器？

我被一些事件侦听器卡住了。当一个元素被单击时，我想为单击创建另一个侦听器。出于某种原因，他们都在开火。以下是代码和jsbin： HTML

点击我

JS

$（'button'）。在（'click'，函数（事件）{
$（'body'）。追加（'p>按钮已单击
'）；
$（'.wrap'）.addClass（'clicked'）；
$（'body'）。on（'click'，'clicked'，函数（e）{
$（'body'）.append（'.clicked
'）；
$（'.wrap'）.removeClass（'clicked'）；
$（'body'）.off（'click'，'clicked'）；
});
});

---

根据我对事件监听器的理解，第二个监听器应该在“.clicked”元素有一个完整的click事件（鼠标向下和鼠标向上）之前不会触发，但它在第一次单击时触发，这意味着即使该元素在事件之后才有触发器类，也会触发该事件。我每次都看到事件侦听器被成功删除，但在我认为应该调用它之前就调用了它。所以，我现在真的很困惑。。。有什么建议吗？我希望在不久的将来我能拥有一个掌心

事件泡沫。当您单击按钮时，您正在向主体添加事件。一旦按钮的事件处理程序完成（也就是说，wrap现在有一个clicked类），它就会继续冒泡DOM，直到到达主体。由于主体现在有一个新的点击事件，所以该事件也会被触发。然后，jQuery在主体中查找与

选择器匹配的元素。单击
选择器，对找到的任何元素调用处理程序。要停止此操作，您可以使用setTimeout延迟将事件绑定到主体，或者停止按钮的click事件的传播，以便它不会冒泡到主体

$('button').on('click', function(event){
    event.stopPropagation();
    ...

时间线：

将触发mousedown事件，然后在按钮上触发mouseup事件
单击按钮上触发的事件处理程序
单击的
类被添加到
.wrap
div
单击事件绑定到主体，委托给匹配的元素。单击
事件通过dom冒泡到主体
单击在主体上触发的事件处理程序
jQuery的click事件处理程序查找与
选择器匹配的当前元素（主体）的后代元素

它查找具有单击的
类的
.wrap
div，并调用该元素上的事件处理程序

是的，我得到了事件气泡，但dp文档声明：“单击事件仅在这一系列事件之后触发：当指针位于元素内部时，按下鼠标按钮。当指针位于元素内部时，松开鼠标按钮”。为什么“嵌套”如果单击启动时选择器类不存在，则触发事件。对，但一旦触发该事件，整个事件将冒泡。当事件到达主体时，wrap div将有一个clicked类。当事件通过冒泡到达主体时，jQuery将在主体内查找与
。clicked
选择器匹配的元素。由于wrap现在具有该类，因此将在wrap上触发处理程序。@circlecube:该类是否在mousdown上并不重要。该元素仅在单击后检查，此时它具有类。。你在调查这件事吗？
$('button').on('click', function(event){
  $('body').append('<p>button clicked</p>');
  $('.wrap').addClass('clicked');

  $('body').on('click', '.clicked', function(e){
    $('body').append('<p>.clicked clicked</p>');
    $('.wrap').removeClass('clicked');
    $('body').off('click', '.clicked');
  });
});

$('button').on('click', function(event){
    event.stopPropagation();
    ...