イベントがDOMへの伝播を終了したことを検出するJavaScriptまたはjQueryの方法はありますか? クリック時に(ターゲット「html」で)アタッチされるjQueryクリックハンドラーがあり、それを追加するまさにそのクリックが、ターゲットにバブルアップするとトリガーされます。伝播が完了するまでハンドラのアタッチを遅らせたい。event.stopPropagation() は危険なビジネスだと聞いたので、使用したくありません。
これが私のコードです。#title-editable はアンカータグです。vclick は、jQuery Mobile によって定義されたイベントです。#title-editable を 1 回クリックするだけで、両方のコンソール ログを取得できます。
$("#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 の代わりに .on を使用して、イベントが最初に発生したときに切り離されないようにします。クリック イベントのターゲットを確認し、内部イベントの変更のみを実行し、ターゲットが #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");
}
});