Может ли JavaScript или jQuery обнаруживать, когда распространение события завершено?

Question

Есть ли какой-либо способ в JavaScript или jQuery обнаружить, когда событие закончено, распространяя DOM? У меня есть обработчик jQuery click, который привязывается (с целевым «html») на клик, а сам клик, который добавляет его, запускает его, когда он пузырится до цели. Я хочу отложить привязку обработчика до тех пор, пока не будет выполнено распространение. Я слышал event.stopPropagation() - это рискованный бизнес, поэтому я бы предпочел не использовать его.

Вот мой код. # title-editable является привязным тегом. 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."); 
    }); 
    }); 

Редактировать: Я думаю, у меня есть обходное решение. Вместо .one для внутреннего события, я использую. Так что событие не отсоединяется при первом запуске. Я проверяю цель события click и выполняю только изменения для внутреннего события и отделяю внутреннее событие, если цель не является # прав на редактирование.

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

UPDATE:

Вторая теория:

вы сказали, что ancestor получает класс по клику #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."); 
    } 
});