JavaScript或jQuery能否检测到事件传播何时完成？

JavaScript或jQuery中是否有任何方法可以检测事件何时完成向DOM的传播？我有一个jQuery点击处理程序，它在点击时被附加（带有目标“html”），而添加它的点击一旦跳出目标就会触发它。我想延迟处理程序附件，直到传播完成。我听说event.stopPropagation（）有风险，所以我不想使用它

这是我的密码#标题可编辑是一个定位标记。vclick是jQuery Mobile定义的事件。我只需单击#title editable即可获得两个控制台日志

  $("#title-editable").on("vclick", function(event){
    event.preventDefault();
    console.log("First handler fired.");
    /* Would like to detect completion of event propagation here 
      and only execute the next statement after that. */
    $("html").one("vclick",function(){
      console.log("Second handler fired.");
    });
  });

  $("#title-editable").on("vclick", function(event){
    event.preventDefault();
    console.log("First handler fired.");
    $("html").on("vclick",function(event2){
      console.log("Second handler fired.");
      if(!$(event2.target).closest("#title-editable").length){
        console.log("Execute changes here.");
        $("html").off("vclick");
      }
    });

编辑：我想我有一个解决办法。对于内部事件，我使用.on而不是.1，这样事件在第一次触发时就不会分离。我检查click事件的目标，只对内部事件执行更改，如果目标不可编辑，则分离内部事件

  $("#title-editable").on("vclick", function(event){
    event.preventDefault();
    console.log("First handler fired.");
    /* Would like to detect completion of event propagation here 
      and only execute the next statement after that. */
    $("html").one("vclick",function(){
      console.log("Second handler fired.");
    });
  });

  $("#title-editable").on("vclick", function(event){
    event.preventDefault();
    console.log("First handler fired.");
    $("html").on("vclick",function(event2){
      console.log("Second handler fired.");
      if(!$(event2.target).closest("#title-editable").length){
        console.log("Execute changes here.");
        $("html").off("vclick");
      }
    });

---

根据您最后的评论，最简单的逻辑如下：

var changed=false;
$('#title-editable').on('vclick',function(event){
    event.preventDefault();
    console.log("First handler fired.");
    changed=true;
});
$(document).on("vclick",function(){
    if(changed){
        console.log("Second handler fired.");
        //here you can revert your actions and then the next line
        changed=false;
    }
});

更新：

$(document).on("vclick",function(event){
    if(!$('#title-editable').is(':visible')){
        console.log("Second handler fired.");
        //here you can revert your actions and then the next line
    }
    else{
        event.preventDefault();
        console.log("First handler fired.");
    }
});

$(document).on("vclick",function(event){
    if(!$('#title-editable').is(event.target) || !$('#title-editable').has(event.target)){
        console.log("Second handler fired.");
        //here you can revert your actions and then the next line
    }
    else{
        event.preventDefault();
        console.log("First handler fired.");
    }
});

第二种理论：

$(document).on("vclick",function(event){
    if(!$('#title-editable').is(':visible')){
        console.log("Second handler fired.");
        //here you can revert your actions and then the next line
    }
    else{
        event.preventDefault();
        console.log("First handler fired.");
    }
});

$(document).on("vclick",function(event){
    if(!$('#title-editable').is(event.target) || !$('#title-editable').has(event.target)){
        console.log("Second handler fired.");
        //here you can revert your actions and then the next line
    }
    else{
        event.preventDefault();
        console.log("First handler fired.");
    }
});

您说过祖先在点击

#title editable

时会得到一个类，所以您可以尝试下面的代码：

$(document).on("vclick",function(event){
    if($('#title-editable').parent().hasClass('givenClass')){ //assuming the class is called "givenClass" and the ancestor is the parent of "#title-editable" (you need to sort that out)
        console.log("Second handler fired.");
        //here you can revert your actions and then the next line
    }
    else{
        event.preventDefault();
        console.log("First handler fired.");
    }
});

第三种理论：

$(document).on("vclick",function(event){
    if(!$('#title-editable').is(':visible')){
        console.log("Second handler fired.");
        //here you can revert your actions and then the next line
    }
    else{
        event.preventDefault();
        console.log("First handler fired.");
    }
});

$(document).on("vclick",function(event){
    if(!$('#title-editable').is(event.target) || !$('#title-editable').has(event.target)){
        console.log("Second handler fired.");
        //here you can revert your actions and then the next line
    }
    else{
        event.preventDefault();
        console.log("First handler fired.");
    }
});

第四种理论：

$(document).on("vclick",function(event){
    if(!$('#title-editable').is(':visible')){
        console.log("Second handler fired.");
        //here you can revert your actions and then the next line
    }
    else{
        event.preventDefault();
        console.log("First handler fired.");
    }
});

$(document).on("vclick",function(event){
    if(!$('#title-editable').is(event.target) || !$('#title-editable').has(event.target)){
        console.log("Second handler fired.");
        //here you can revert your actions and then the next line
    }
    else{
        event.preventDefault();
        console.log("First handler fired.");
    }
});

---

那完全没有道理？如果有人能理解的话，这很可能是X/Y问题？通常，

正文

是冒泡事件的目的地。但是如果你在那里处理事件，如果一些代码调用树下的某个地方的

stopPropagation（）

，会怎么样？你能指出什么是没有意义的吗？我尝试做的基本事情是，在单击“标题可编辑”时，将一个单击事件附加到文档，但不触发该事件。有更好的方法吗？这是我想要的行为。用户单击#标题可编辑。发生了一些变化。（特别是，我在#title editable的祖先上设置了一个类，#title editable将消失，显示为：none，并显示一个输入元素。）如果用户单击其他任何地方，则会发生相反的更改。这是jQuery错误。在本机DOM中，在分派过程中安装的处理程序不会启动。感谢您的建议，但它似乎也有同样的问题。我尝试了一下，两个控制台日志在一次单击后再次启动。我认为现在发生的事情是改变了=真的；在事件冒泡到文档根之前执行。第二个理论似乎有相同的问题-类添加和类检查的时间与第一个理论中布尔变量的时间一致。我认为第三个理论也是如此#标题“可编辑”在单击时变为不可见，这似乎是在单击事件到达文档之前执行的。所以“如果”总是正确的。我想出了一个解决办法，似乎可以做到这一点。将其添加到原始问题中。谢谢你试着帮助我！不用客气，很高兴你得到了答案，但为了以防万一，试试我刚才添加的第四个理论，我认为它也会起作用！