點擊事件冒泡導致console.log打印錯誤元素？如何精準獲取被點擊的HTML元素？

精準捕獲點擊事件：有效獲取html元素

在網頁開發中，精確獲取用戶點擊的html元素至關重要。本文針對一個常見問題：如何確保點擊頁面元素時，console.log 正確顯示被點擊元素，而非其父元素或其他元素，進行深入分析和解決方案提供。

問題：事件冒泡導致元素識別錯誤

假設一段代碼旨在通過監聽點擊事件，打印被點擊元素的標簽名。代碼包含

、 和 元素。點擊 <input> 和 <textarea> 元素時，代碼能正確打印標簽名。但點擊 </p> <p> 元素時，打印結果卻是 body，而非預期的 p。</p> <p>示例代碼：</p> <p><span>立即學習</span>“<a href="http://www.babyishan.com/?golink=aHR0cHM6Ly9wYW4ucXVhcmsuY24vcy9jYjY4MzVkYzdkYjE=" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow noopener" target="_blank">前端免費學習筆記（深入）</a>”；</p> <div style="position:relative; padding:0px; margin:0px;"> <pre><p>content in p</p> <input type="text" value="content in input"> <textarea>content in textarea</textarea> <script> function handler(<a href="http://www.babyishan.com/tag/event"><b>Event</b></a>) { var x = document.activeElement.tagName; console.log(x); } document.addEventListener('click', handler); </script></pre> <div></div> </div> <p><strong>原因：<a href="http://www.babyishan.com/tag/%e4%ba%8b%e4%bb%b6%e5%86%92%e6%b3%a1"><b>事件冒泡</b></a>機制</strong></p> <p>問題根源在于事件冒泡。點擊 </p> <p> 元素時，事件會向上冒泡至其父元素，最終到達 body 元素。document.activeElement 獲取的是當前獲得焦點的元素，而點擊 </p> <p> 元素不會改變焦點，焦點仍然在 body 上，因此 document.activeElement 返回 body。</p> <p><strong>解決方案：阻止事件冒泡</strong></p> <p><a >解決方法</a>是利用 event.stopPropagation() 方法阻止事件冒泡。將 event.stopPropagation() 添加到事件處理函數中，即可阻止事件向上冒泡，確保 console.log 打印被點擊元素本身的標簽名。</p> <p>改進后的代碼：</p> <div style="position:relative; padding:0px; margin:0px;"> <pre><p>content in p</p> <input type="text" value="content in input"> <textarea>content in textarea</textarea> <script> function handler(event) { event.stopPropagation(); // 阻止事件冒泡 var x = event.target.tagName; // 使用 event.target 獲取目標元素 console.log(x); } document.addEventListener('click', handler); </script></pre> <div></div> </div> <p>通過使用 event.target 代替 document.activeElement，我們直接獲取到觸發事件的元素，從而避免了事件冒泡帶來的問題。 此方法更直接、更可靠地獲取被點擊的 HTML 元素。</p> <p>

以上就是點擊