javascript - JavaScript 或 jQuery 可以检测事件传播何时完成吗？

Question

JavaScript 或 jQuery 中是否有任何方法可以检测事件何时完成在 DOM 上的传播？我有一个 jQuery 单击处理程序，它在单击时附加(带有目标“htm​​l”)，并且添加它的单击在它冒泡到目标后就会触发它。我想延迟处理程序附件，直到传播完成。我听说 event.stopPropagation() 是有风险的事情，所以我不想使用它。

这是我的代码。 #title-editable 是一个 anchor 标记。 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.");
    });
  });

编辑:我想我有一个解决方法。我使用 .on 代替内部事件的 .one，这样事件在第一次触发时就不会分离。我检查点击事件的目标，仅执行内部事件的更改，如果目标不是 #title-editable，则分离内部事件。

  $("#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");
      }
    });

Answer 1

根据您最后的评论，最简单的逻辑是这样的:

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;
    }
});

更新:

第二种理论:

您说过，祖先在单击#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.");
    }
});