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

我有一个可调焦的外部容器（使用tabindex="1"），它包含一系列跨度。所有这些跨度都有规则display:inline-block。我注意到一些使用焦点选择器突出显示的CSS规则在IE中不起作用。如何停止IE（Internet Explorer）中的内联块元素获得焦点

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

我在this jsfiddle中复制了这个问题。我有一个可调焦的div，其中包含4个跨度不同的display规则（initial,inline,block,inline-block）。在mouseup我对您点击的元素调用focus()。除了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的错误。它没有任何计划重点，可以在this amended js中看到。我已经提出了a bug for microsoft，但我无法想象他们现在对它做了什么，现在他们专注于Edge。

编辑2：微软不打算修复或者更确切地说，他们的位置，它是由您不使用IE11固定：

感谢您的反馈。此问题似乎已在Microsoft Edge的中修复。我们目前不在处理与安全相关的问题以外的Internet Explorer中的功能错误。

来源

2016-03-21 Jools

嗨，你的目标是什么？因为在你的示例中，通过用'$（'＃outerDiv'）替换'$（“span”）。mouseup（）'来解决这个问题。click（function（）{$（this）.focus（）;}） ;' – Yoplaboom

@Yoplaboom当我们调用focus（）时，我的目标是阻止跨度获得焦点，即它在除Internet Explorer之外的每个浏览器中的行为方式。正如我所说的，不幸的是，调用focus（）发生在jQuery UI的代码中，因为这些跨度也是可拖动的。 – Jools

我已经添加了从jQuery UI到我的问题的罪魁祸首代码 – Jools

到目前为止我只能想到3种解决方案。

修补jstree以创建具有不同结构的节点，例如，在线跨度内的块跨度。
修补jQuery UI只调用focus()可聚焦元素（也查看父元素。

喜欢的东西与更换this.element.focus();：
```
this.element.closest(":focusable").focus(); 
```

移动焦点焦点（jsfiddle）：

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

~~等待微软解决它。~~

我倾向于号3

微软不打算修复：

感谢您的反馈。此问题似乎已在Microsoft Edge的中修复。我们目前不在处理与安全相关的问题以外的Internet Explorer中的功能错误。

来源

2016-03-22 09:46:23 Jools

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

回答

相关问题