如何停止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）中的內聯塊元素獲得焦點

回答

相關問題