點擊標簽卻獲取不到目標元素？如何精準捕獲網頁點擊事件？

網頁點擊事件精準捕獲：解決標簽點擊問題

前端開發中，準確獲取用戶點擊的html元素至關重要。本文將分析如何精確獲取點擊事件的目標元素，特別是解決點擊、或等標簽時，無法正確獲取目標元素的問題。

許多開發者嘗試使用document.activeElement來獲取焦點元素，但這在點擊標簽時，往往返回body元素，而非預期的元素。這是由于事件冒泡機制：點擊事件會向上冒泡至父元素，最終到達document。document.activeElement獲取的是獲得焦點的元素，通常是body。

解決方法是阻止事件冒泡。通過Event.stopPropagation()方法，我們可以阻止事件向上傳播。改進后的代碼如下：

<p>content in p</p> <input type="text" value="content in input"> <textarea>content in textarea</textarea>  function handler(event) {     const targetElement = event.target;     console.log(targetElement.tagName);     event.stopPropagation(); } document.addEventListener('click', handler);

此代碼使用event.target直接獲取觸發事件的html元素，避免了事件冒泡的影響。event.stopPropagation()確保只處理目標元素的點擊事件。 無論點擊、還是，console.log都會正確輸出相應的元素標簽名。 這確保了點擊事件的精準捕獲。