返回課程

捕捉元素中的連結

重要性:5

id="contents" 元素中的所有連結詢問使用者是否真的要離開。如果使用者選擇不要離開,則不要繼續執行。

像這樣

細節

  • 元素內的 HTML 可能在任何時候動態載入或重新產生,所以我們無法找到所有連結並在它們上面放置處理函式。使用事件委派。
  • 內容可能包含巢狀標籤。在連結內部也是如此,例如 <a href=".."><i>...</i></a>

為這個任務開啟一個沙盒。

這是事件委派模式的一個絕佳應用。

在實際情況中,我們可以向伺服器傳送一個「記錄」請求,以儲存訪客離開位置的資訊,而不是詢問訪客。或者,我們可以載入內容並直接在頁面上顯示它(如果允許的話)。

我們只需要捕捉 contents.onclick 並使用 confirm 來詢問使用者。一個好主意是使用 link.getAttribute('href') 而不是 link.href 來取得 URL。請參閱解決方案以取得詳細資訊。

在沙盒中開啟解決方案。