IE中的嵌套跨度鼠标悬停问题

Question

我有嵌套的 span 元素，并且有父 span 的 mouseover 和 mouseout 事件

<span id='parent' onmouseover='showChild()' onmouseout='hideChild()'>
    <span id='child'></span>
</span>

我在parent span 上显示child span 上的mouseover 并将其隐藏在mouseout 上来自parent。

这一切在 Firefox 和 chrome 中都可以正常工作，但在 IE 中，只要鼠标经过子元素，IE 就会将其视为鼠标离开父元素并隐藏子元素。

对于 IE 是否有任何解决方法或正确的方法？

我可以将相同的事件放在子跨度中，这也应该在 IE 中工作，但这是否是正确的方法？

Answer 1

使用 css 从父 div 中移除指针事件：

#parent * {
     pointer-events: none;
}

Answer 2

您可以通过使用onmouseleave 而不是onmouseout 来解决此问题：

<span id='parent' onmouseover='showChild()' onmouseleave='hideChild()'>
    <span id='child'></span>
</span>

当您将鼠标悬停在孩子上时，上述内容不会触发hideChild()，但在父子之间移动时会触发showChild()。

为防止这种情况，您可以将onmouseover 替换为onmouseenter：

<span id='parent' onmouseenter='showChild()' onmouseleave='hideChild()'>
    <span id='child'></span>
</span>

检查此fiddle。打开控制台进行输出。

Answer 3

在这种情况下，您只需要使用 Event.target 来检查事件目标是否不是孩子。

这是一个有效的 sn-p：

function showChild(e) {
  e = e || window.event;
  var child = document.getElementById("child");
  if (e.target !== child) {
    child.style.display = "inline-block";
  }
}

function hideChild(e) {
  e = e || window.event;
  var child = document.getElementById("child");
  if (e.target !== child) {
    child.style.display = "none";
  }
}

#parent {
  background-color: yellow;
  width: 300px;
  display: block;
  height:100px;
}
#child {
  background: blue;
  color: white;
  width:auto;
  height:auto;
}

<span id="parent" onmouseover="showChild(event)" onmouseout="hideChild(event)">Parent
    <span id="child">Child</span>
</span>

这会给你你所需要的。

注意：

在 Firefox 中，您应该将 event 参数传递给您的函数，例如 showChild(event)，否则它将声明事件 e is undefined。

Answer 4

找到解决方法。

我用display:inline-block 替换了div 的父跨度，现在它在任何地方都可以使用！

谢谢！