IE中Anchor标签点击后focus异常：activeElement指向Span问题求助

Hi SrinivasaRao.CH, I’ve run into this exact IE quirk before—super frustrating how it shifts focus to inner elements when you click them! Let’s go through a few reliable solutions to make sure document.activeElement points to your <a> tag in IE, just like it does in Chrome.

Solution 1: Disable Pointer Events on the Span #

This is my go-to fix because it’s clean and CSS-only. By setting pointer-events: none on the <span>, you’re telling IE (and other browsers) that the span shouldn’t receive any click or focus events—all interactions will pass through directly to the parent <a> tag.

Here’s how to implement it:

a span {
  pointer-events: none;
}

Note: This works in IE 11 and newer. If you need support for older IE versions, try the next solution.

Solution 2: Force Focus Back to the Anchor on Span Click #

If you need to support older IE versions (like IE 10 or below), you can add a click handler to the span that prevents its default behavior and explicitly focuses the parent anchor.

First, give your anchor an ID for easy targeting:

<a href="javascript:void(0)" tabindex="0" id="homeAnchor"> 
  <span onclick="handleSpanClick(event, this.parentElement)"> Home </span> 
</a>

Then add the JavaScript function:

function handleSpanClick(event, anchor) {
  // Prevent the span from taking focus
  event.preventDefault();
  // Force focus back to the anchor
  anchor.focus();
}

Solution 3: Make the Span Unfocusable #

Another simple fix is to set tabindex="-1" on the span. This tells browsers that the span shouldn’t be a focusable element, so clicking it will keep focus on the parent anchor.

<a href="javascript:void(0)" tabindex="0"> 
  <span tabindex="-1"> Home </span> 
</a>

This works across all IE versions and is great if you don’t want to add extra CSS or JavaScript.

All of these solutions will ensure that when you click the "Home" text in IE, document.activeElement will correctly reference your <a> tag instead of the inner <span>. Pick the one that fits your browser support needs and code style best!

内容的提问来源于stack exchange，提问作者user1632949