Javascript 为什么赢了';这段代码在Firefox中不起作用吗?

Javascript 为什么赢了';这段代码在Firefox中不起作用吗?,javascript,html,firefox,dom,cross-browser,Javascript,Html,Firefox,Dom,Cross Browser,当鼠标从外部div-in移动到容器的一个子元素时,我试图防止onmouseout事件触发。这是我想出的解决办法。它适用于IE8和Chrome,但不适用于Firefox(最新版本)。这是因为在Foo函数中,window.event为null。我还验证了没有参数被传递到函数中。如何在Firefox中使用此代码 <html> <body> <div style="background-color: blue; width: 400px; height: 400px;"

当鼠标从外部div-in移动到容器的一个子元素时,我试图防止onmouseout事件触发。这是我想出的解决办法。它适用于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>

子元素
var outer=document.getElementById('outer');
函数Foo()
{
var-toElem=event.relatedTarget | | event.toElement;
if(toElem!=outer.parentNode)
返回;
window.alert('Outer div在mouseout..时触发);
}

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

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

注意-我并没有在所有浏览器中都尝试过你的代码,所以可能还有其他问题,但这是我突然想到的问题。

我找到了答案。这段代码适用于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>

子元素
var outer=document.getElementById('outer');
outer.onmouseout=函数Foo(args)
{
var toElem=(window.event)?(event.relatedTarget | | event.toElement):args.relatedTarget;
if(toElem!=outer.parentNode)
返回;
window.alert('Outer div在mouseout..时触发);
}

为什么不在电脑上安装主要浏览器并进行测试?我就是这么做的,比如Chrome、FF、Safari和Operaw,为什么你不在每个主要浏览器上测试一下呢?你只缺少FF、Safari和Chrome。总之,使用jQuery,您基本上可以在任何浏览器(大多数情况下)中使用工作脚本检查DOM事件的浏览器兼容性(还有CSS属性):+1对于jQuery或其他库,您可能无法获得更好的跨浏览器支持..+1,因为您希望自己找到解决方案(而不隐藏在jQuery后面)-1要求StackOverflow进行您应该进行的基本测试。试试看。如果它不起作用,试着找到解决办法。如果你被卡住了,问一个问题。
event
也从非标准的全局(
窗口。event
)读取,除了IE之外,它对任何东西都不起作用。谢谢你的回答,但是这在Firefox上不起作用。我不太清楚为什么。因为您使用的是内联处理程序,如果您使用
onmouseout=“Foo(event)”
,那么请将函数的签名
函数Foo(event){…
,即调用
“Foo(event)”的中间函数
将在IE和Firefox中拾取事件对象。很酷。告诉人们该对象出了什么问题,然后接受您的答案。出现了一些问题。1)“args”如果以声明方式绑定事件处理程序,则不会将参数发送到Foo函数中。2)window.event在Firefox中不存在,因此使用event.relatedTarget会导致Firefox以静默方式失败,并且不会计算表达式的其余部分,因此在执行任何操作之前,必须检查window.event是否存在。如前所述,jQuery将抽象所有这些内容,并使事件绑定更加容易。YUI还通过其
event.addListener()
API提供了类似的好处。堆栈溢出不允许您接受自己的答案(您也不会因此获得任何“分数”)有两天,我决定接受第一个答案,因为我发现它很有帮助,并且为我指明了正确的方向。