javascript - 在IE11中修复:hover伪类

IE存在这样的问题：当存在打开的:hover元素时，select伪类无法按预期工作。打开下拉列表并将鼠标移到选项上时，所有父标记都会松开:hover伪类。

这是由于以下事实：打开的下拉列表被实现为新窗口（source）

我正在尝试通过在父元素上使用mouseenter和mouseleave事件使用Javascript修复此问题，但是，不幸的是，当用户将鼠标移到打开的下拉列表上时，也会出现mouseleave的情况。

到目前为止我的尝试：

var container = document.getElementById("container");
var select = document.getElementById("select");

//$('#select').select2();

container.addEventListener("mouseenter", function() {
  container.classList.add("hover");
});

container.addEventListener("mouseleave", function() {
  container.classList.remove("hover");
});

#container {
  display: inline-block;
  background-color: red;
}

#container:hover,
#container.hover {
  background-color: green;
}

<div id="container">
<select id="select">
<option>Some option 1</option>
<option>Some option 2</option>
<option>Some option 3</option>
</select>
<p>
some long text text text text text<br>
some long text text text text text<br>
some long text text text text text<br>
some long text text text text text<br>
some long text text text text text<br>
some long text text text text text<br>
some long text text text text text<br>
some long text text text text text<br>
some long text text text text text<br>
some long text text text text text<br>
</p>
</div>

最佳答案

无论出于何种原因，在IE11中，当鼠标悬停在select上时（即使它包含在您正在侦听的父div中），都会触发mouseleave事件。尝试检查事件的“ relatedTarget”属性，以查看是否要为后代“离开” div，或者是否实际上要离开div：

container.addEventListener("mouseleave", function(e) {
  if (e.relatedTarget && !container.contains(e.relatedTarget)) {
    container.classList.remove("hover");
  }
});

基本上，仅当我们要移至1）的元素存在并且2）不是容器的后代时，才删除“悬停”类。


对于懒惰者：https://jsfiddle.net/q1p5gLLh/6/
关于“ relatedTarget”：https://www.w3schools.com/jsref/event_relatedtarget.asp
奖励：“ relatedTarget”与所有主流浏览器兼容。


编辑：之所以我们检查“ e.relatedTarget”是否在容器中包含（不是双关语），是因为可能“ relatedTarget”为空。实际上，当您将鼠标悬停在选择下拉列表上时，“ relatedTarget”始终为null。我想知道为什么会这样，而不是在离开div进入HTML主体时触发“ mouseleave”，在该处您确实获得了“ relatedTarget”的元素。