为什么这段代码在 Firefox 中不起作用？答案

【问题标题】：Why won't this code work in Firefox?为什么这段代码在 Firefox 中不起作用？
【发布时间】：2011-12-13 08:06:57
【问题描述】：

我试图阻止 onmouseout 事件在鼠标从外部 div 移动到容器的子元素之一时触发。这是我想出的解决方案。它适用于 IE8 和 Chrome，但不适用于 Firefox（最新版本）。这是因为在 Foo 函数中，window.event 为空。我还验证了没有参数传递到函数中。如何让这段代码在 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>

【问题讨论】：

为什么不在你的电脑上安装主流浏览器并测试一下呢？我就是这样做的，IE、Chrome、FF、Safari 和 Opera
你为什么不测试每个主要的浏览器呢？你只缺少 FF、Safari 和 Chrome。无论如何，使用 jQuery，您基本上在任何浏览器中都有一个工作脚本（在大多数情况下）
检查浏览器对 DOM 事件（以及 CSS 属性）兼容性的好网站：quirksmode.org/dom/events/index.html
+1 用于 jQuery 或其他库，您可能无法获得更好的跨浏览器支持..
+1 表示希望自己找到解决方案（而不是躲在 jQuery 后面）。 -1 要求 StackOverflow 做你应该做的基本测试。试试看。如果它不起作用，请尝试找到解决方案。如果您遇到困难，请提出问题。

标签： javascript html firefox dom cross-browser

【解决方案1】：

我想通了。此代码适用于 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>

【讨论】：

酷。告诉人们它有什么问题，接受你的回答。
出现了一些问题。 1) 如果您以声明方式绑定事件处理程序，则“args”参数不会发送到 Foo 函数中。 2) window.event 在 Firefox 中不存在，因此使用 event.relatedTarget 会导致 Firefox 静默失败并且不评估表达式的其余部分 - 因此您必须在执行任何操作之前检查 window.event 是否存在。如前所述，jQuery 将抽象所有这些东西并使事件绑定更容易。 YUI 还通过其Event.addListener() API 提供了类似的好处。
Stack Overflow 2 天内不允许您接受自己的答案（无论如何您也不会得到任何“积分”），所以我决定接受第一个答案，因为我发现它很有帮助，它让我指出了正确的方向。

【解决方案2】：

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

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

注意 - 我实际上并未在所有浏览器中尝试过您的代码，因此可能存在其他问题，但这是让我大吃一惊的问题。

【讨论】：

另外，event 正在从非标准全局 (window.event) 中读取，除 IE 外，它无法在任何东西上运行。
感谢您的回答，但这不适用于 Firefox。我不太清楚为什么。
由于您使用的是内联处理程序，如果您使用onmouseout="Foo(event)"，则将您的函数签名设为function Foo(event) {...，调用您的"Foo(event)" 的中间函数将在两者中获取事件对象IE 和 Firefox。