如何阻止IE(Internet Explorer）中的内联块元素获得焦点

How to stop inline-block elements in IE (Internet Explorer) gaining focus

本文关键字：元素 焦点 IE 何阻止 Internet Explorer      更新时间：2023-09-26

我有一个可聚焦的外部容器（使用tabindex="1"），其中包含一系列跨度。所有这些跨度都有规则display:inline-block 。我注意到一些使用焦点选择器突出显示的 css 规则在 IE 中不起作用。

显然，这是因为我的外部容器实际上并没有集中注意力。相反，内部跨度（没有 tabindex，不应该是可聚焦的）占据焦点。

我已经在这个jsfiddle中复制了这个问题。我有一个可聚焦的div，包含 4 个跨度，具有不同的display规则（initial、inline、block、inline-block）。在mouseup，我对您单击的元素调用focus()。外部div 在除inline-block跨度的情况之外的所有情况下都获得焦点。

.HTML：

<body id="body">
<div tabindex="1" id="outerDiv">
Outer div
<span id="inlineSpan">Inline span.</span>
<span id="inlineBlockSpan">Inline-block span.</span>
<span id="blockSpan">Block span.</span>
<span id="initialSpan">Initial span.</span>
</div>
<div id="output">
</div>
</body>

Javascript（使用jquery）：

$("span").on("mouseup",function(){
    $(this).focus();
  setTimeout(function(){
        $("#output").append(document.activeElement.id+"<br>")
   });
})

.CSS：

#inlineSpan{
  display:inline;
}
#inlineBlockSpan{
  display:inline-block;
}
#blockSpan{
  display:block;
}
#initialSpan{
  display:initial;
}
span,#outerDiv{
  border: 1px black solid;
  padding:1px
}

这是IE的错误吗？我还没有在其他浏览器中看到它。有没有办法阻止它？

不幸的是，造成这种情况的两件事是在第三方代码中。 jQuery-UI 正在mouseup上调用focus()：

_mouseUp: function( event ) {
   this._unblockFrames();
   //If the ddmanager is used for droppables, inform the manager that dragging has stopped (see #5003)
   if ( $.ui.ddmanager ) {
      $.ui.ddmanager.dragStop(this, event);
   }
   // Only need to focus if the event occurred on the draggable itself, see #10527
   if ( this.handleElement.is( event.target ) ) {
      // The interaction is over; whether or not the click resulted in a drag, focus the element
      this.element.focus();
   }
   return $.ui.mouse.prototype._mouseUp.call(this, event);
},

JStree正在使用inline-block来构建跨度，因此理想情况下，任何修复都将保持第三方代码不变。

编辑：开始认为这只是IE11错误。它没有任何程序化焦点，可以在此修订后的 js 中看到。我已经为微软提出了一个错误，但我无法想象他们现在专注于Edge会做任何事情。

编辑2：Microsoft不会修复它，或者更确切地说，他们的立场是你不使用IE11来修复它：

感谢您的反馈。此问题似乎已在 中修复 Microsoft边缘。我们目前没有处理功能错误 Internet Explorer 之外的安全相关问题。

到目前为止，

我能想到的只有 3 种解决方案。

  1. 修补 jstree 以创建具有不同结构的节点，例如内联跨度内的块跨度。

  2. 将 jquery UI 修补为仅对可聚焦元素调用focus()（也查看父元素）。

    类似于将this.element.focus();替换为：

    this.element.closest(":focusable").focus();

  3. 将焦点移到焦点上（jsfiddle）：

    $outerDiv.on("focus",".inline-block-span-class", function(){
    $outerDiv.focus();
});

  4. 等待Microsoft修复它。

我倾向于3号。

<小时 />

Microsoft不会修复它：

感谢您的反馈。此问题似乎已在 中修复Microsoft边缘。我们目前没有处理功能错误Internet Explorer 之外的安全相关问题。

相关文章：