Vueコンポーネント内のDOMElement.addEventListenerを使用して先行するイベントをキャプチャしています

Question

createdライフサイクルメソッド内で、$elの外部にあるクリックをキャプチャするライフサイクルメソッドがドキュメントに追加されるVueコンポーネントがあります。これを呼びましょうPopup

上記のPopupを呼び出す要素をクリックすると、すぐに文書のクリックイベントが取り込まれます。ここで

は単純化されたコードでjsfiddleです：https://jsfiddle.net/awei01/5vuqjcxd/

そして、対照的に、ここでは正確にクリックイベントバインドjsの純粋なバージョンです：クロスリファレンスとしてhttps://jsfiddle.net/awei01/qzqku0w9/

が、ここではVUEのフォーラムがあります投稿：https://forum.vuejs.org/t/document-addeventlistener-captures-a-click-preceding-listeners-creation/11558

すべての洞察が認められます。

Answer 1

クレジットはVueコアチームメンバーLinusBorgになります。

ここsetTimeout

https://forum.vuejs.org/t/document-addeventlistener-captures-a-click-preceding-listeners-creation/11558

が必要実装setTimeoutと実施例である：https://jsfiddle.net/awei01/ovr9sr6k/

英語での説明：

1. Clickイベントが発生し、captureフェーズに入ります。 parent Vueコンポーネントがこのイベントを処理します。
2. parent成分は、popupモジュール
3. popupモジュールをインスタンス化して実装します表示するための内部$dataフラグを設定します。 created関数では、document.addEventListenerイベントがアタッチされます。
4. クリックイベントcaptureが完了し、DOMのバブリングが開始されます。
5. クリックイベントは、今追加したばかりのイベントリスナーのため、documentによって取得されるようになりました。それはコールバックを起動し、何も起こっていないように見えます。

ソリューション：

1. Clickイベントが発生し、captureフェーズに入ります。 parent Vueコンポーネントがこのイベントを処理します。
2. parent成分は、popupモジュール
3. popupモジュールをインスタンス化して実装します表示するための内部$dataフラグを設定します。 created関数では、setTimeout関数にdocument.addEventListenerを添付して、クリックイベントが完全に完了した後に接続されるようにします。
4. クリックイベントcaptureが完了し、DOMのバブリングが開始されます。
5. イベントのbubble相はsetTimeout内でコールバックが今実行され、文書は今documentにバブルアップが捕獲されることを
6. それ以降のクリックをクリックするリッスン
7. を完了します。