點(diǎn)擊標(biāo)簽卻獲取不到目標(biāo)元素？如何精準(zhǔn)捕獲網(wǎng)頁(yè)點(diǎn)擊事件？

網(wǎng)頁(yè)點(diǎn)擊事件精準(zhǔn)捕獲：解決標(biāo)簽點(diǎn)擊問(wèn)題

前端開發(fā)中，準(zhǔn)確獲取用戶點(diǎn)擊的html元素至關(guān)重要。本文將分析如何精確獲取點(diǎn)擊事件的目標(biāo)元素，特別是解決點(diǎn)擊、或等標(biāo)簽時(shí)，無(wú)法正確獲取目標(biāo)元素的問(wèn)題。

許多開發(fā)者嘗試使用document.activeElement來(lái)獲取焦點(diǎn)元素，但這在點(diǎn)擊標(biāo)簽時(shí)，往往返回body元素，而非預(yù)期的元素。這是由于事件冒泡機(jī)制：點(diǎn)擊事件會(huì)向上冒泡至父元素，最終到達(dá)document。document.activeElement獲取的是獲得焦點(diǎn)的元素，通常是body。

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

<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直接獲取觸發(fā)事件的html元素，避免了事件冒泡的影響。event.stopPropagation()確保只處理目標(biāo)元素的點(diǎn)擊事件。 無(wú)論點(diǎn)擊、還是，console.log都會(huì)正確輸出相應(yīng)的元素標(biāo)簽名。 這確保了點(diǎn)擊事件的精準(zhǔn)捕獲。