Question

我正在尝试阻止onmouseout事件在鼠标从外部div移动到容器的子元素之一时触发。这是我提出的解决方案。它适用于IE8和Chrome，但不适用于Firefox（最新版本）。这是因为在Foo函数中，window.event为null。我还验证了没有参数传递给函数。如何在Firefox中使用此代码？

<html>
<body>

<div style="background-color: blue; width: 400px; height: 400px;" onmouseout="Foo()" id="Outer">
   <div style="background-color: green; width: 100px; height: 100px;" id="Inner">
      Child element
   </div>
</div>

<script language="JavaScript">
   var outer = document.getElementById('Outer');

   function Foo()
   {
      var toElem = event.relatedTarget || event.toElement;

      if(toElem != outer.parentNode)
         return;

      window.alert('Outer div fired onmouseout..');
   }
</script>

</body>
</html>

Answer 1

乍看之下，您的代码在IE中应该可以正常工作，但是其他浏览器可能会遇到使用事件对象的toElement属性的问题，该属性是特定于IE的属性。 W3C定义的属性称为relatedTarget。所以你应该检查一下使用哪个：

var toElem = event.relatedTarget || event.toElement;
if(toElem != outer.parentNode) {
   //Do stuff
}

注意 - 我实际上并没有在所有浏览器中尝试过您的代码，因此可能还有其他问题，但这是一个突然出现在我身上的问题。

Answer 2

我明白了。此代码适用于IE，Firefox和Chrome。

<html>
<body>

<div style="background-color: blue; width: 400px; height: 400px;" id="Outer">
   <div style="background-color: green; width: 100px; height: 100px;" id="Inner">
      Child element
   </div>
</div>

<script language="JavaScript">
   var outer = document.getElementById('Outer');

   outer.onmouseout = function Foo(args)
   {
      var toElem = (window.event) ? (event.relatedTarget || event.toElement) : args.relatedTarget;

      if(toElem != outer.parentNode)
         return;

      window.alert('Outer div fired onmouseout..');
   }
</script>

</body>
</html>

为什么这段代码不适用于Firefox？

2 个答案: