有关IE 和火狐 event 兼容性的问题。

Question

<script type="text/javascript">
    function Out(one,two)
    {
        var ee = event || window.event;
        if(ee.toElement.id !=one && ee.toElement.id !=two)
        {
            document.getElementById(one).style.display="none";
        }
    }
    </script>
<div>
    <div style="width:500px;height:500px;background-color:blue;z-index:0;position:absolute;">
    <div style="background-color:Red;float:left;z-index:0;width:70px;border:0px" onmouseout="Out('menu','link');" onmousemove="menu.style.display='block'">
    <span style="color:White">动态导航</span><br />
    <div id="menu" style="vertical-align:middle;width:230px;height:100px;background-color:Red;z-index:5;display:none;position:absolute;text-align:center;border:0px">
        <table>
            <tr>
                <td><a id="link" href="ImgToWord.aspx">超链接一</a></td>
                <td><a id="A1" href="ImgToWord.aspx">超链接二</a></td>
                <td><a id="A2" href="ImgToWord.aspx">超链接三</a></td>
            </tr>
            <tr>
                <td><a id="A3" href="ImgToWord.aspx">超链接四</a></td>
                <td><a id="A4" href="ImgToWord.aspx">超链接五</a></td>
                <td><a id="A5" href="ImgToWord.aspx">超链接六</a></td>
            </tr>
            <tr>
                <td><a id="A6" href="ImgToWord.aspx">超链接七</a></td>
                <td><a id="A7" href="ImgToWord.aspx">超链接八</a></td>
                <td><a id="A8" href="ImgToWord.aspx">超链接九</a></td>
            </tr>
        </table>
    </div>
    </div>
    <div style="background-color:Yellow;z-index:1;border:0px;width:70px;"  onmousemove="menu1.style.display='block'" onmouseout="Out('menu1','A1')"  >
    <span style="color:White">动态导航</span><br />
    <div id="menu1" style="vertical-align:middle;width:230px;height:100px;background-color:Yellow;z-index:5;display:none;position:absolute;text-align:center;border:0px">
        <table>
            <tr>
                <td><a id="A9" href="ImgToWord.aspx">超链接一</a></td>
                <td><a id="A10" href="ImgToWord.aspx">超链接二</a></td>
                <td><a id="A11" href="ImgToWord.aspx">超链接三</a></td>
            </tr>
            <tr>
                <td><a id="A12" href="ImgToWord.aspx">超链接四</a></td>
                <td><a id="A13" href="ImgToWord.aspx">超链接五</a></td>
                <td><a id="A14" href="ImgToWord.aspx">超链接六</a></td>
            </tr>
            <tr>
                <td><a id="A15" href="ImgToWord.aspx">超链接七</a></td>
                <td><a id="A16" href="ImgToWord.aspx">超链接八</a></td>
                <td><a id="A17" href="ImgToWord.aspx">超链接九</a></td>
            </tr>
        </table>
    </div>
    </div>
    </div>
    </div>我做了一个动态导航的页面，鼠标移上去会出现包裹超链接的DIV，移出去DIV就会隐藏。在IE浏览器下这个导航可以正常运行，但是在火狐下就没有反映。后来我知道window.event.toElement.id 是IE特有的，我现在想要知道，在火狐浏览器中，有没有与在IE中 window.event.toElement.id 同等效果的属性或方法，当然，如果能够让这个动态导航在火狐里面正常运行也可以。

Answer 1

var element = ee.srcElement || ee.target;
取id:
element.id

Answer 2

不好用…… function Out(one,two)
    {
        var ee = event || window.event;
        var element  = ee.srcElement || ee.target;
        var id = element.id;
        if(id!=one&&id!=two)
        {
            document.getElementById(one).style.display="none";
        }
     }srcElement  和 target 好像也是IE专有的吧？

Answer 3

<script type="text/javascript">
    function Out(id,type)
    {
        if(type == 2)
document.getElementById(id).style.display="block";
else
document.getElementById(id).style.display="none";
    }
    </script>
<div>
    <div style="width:500px;height:500px;background-color:blue;z-index:0;position:absolute;">
    <div style="background-color:Red;float:left;z-index:0;width:70px;border:0px" onmouseout="Out('menu',1);"  onmousemove="Out('menu',2);" >
    <span style="color:White">动态导航</span><br />
    <div id="menu" style="vertical-align:middle;width:230px;height:100px;background-color:Red;z-index:5;display:none;position:absolute;text-align:center;border:0px">
        <table>
            <tr>
                <td><a id="link" href="ImgToWord.aspx">超链接一</a></td>
                <td><a id="A1" href="ImgToWord.aspx">超链接二</a></td>
                <td><a id="A2" href="ImgToWord.aspx">超链接三</a></td>
            </tr>
            <tr>
                <td><a id="A3" href="ImgToWord.aspx">超链接四</a></td>
                <td><a id="A4" href="ImgToWord.aspx">超链接五</a></td>
                <td><a id="A5" href="ImgToWord.aspx">超链接六</a></td>
            </tr>
            <tr>
                <td><a id="A6" href="ImgToWord.aspx">超链接七</a></td>
                <td><a id="A7" href="ImgToWord.aspx">超链接八</a></td>
                <td><a id="A8" href="ImgToWord.aspx">超链接九</a></td>
            </tr>
        </table>
    </div>
    </div>
    <div style="background-color:Yellow;z-index:1;border:0px;width:70px;"  onmouseout="Out('menu1',1);"  onmousemove="Out('menu1',2);"  >
    <span style="color:White">动态导航</span><br />
    <div id="menu1" style="vertical-align:middle;width:230px;height:100px;background-color:Yellow;z-index:5;display:none;position:absolute;text-align:center;border:0px">
        <table>
            <tr>
                <td><a id="A9" href="ImgToWord.aspx">超链接一</a></td>
                <td><a id="A10" href="ImgToWord.aspx">超链接二</a></td>
                <td><a id="A11" href="ImgToWord.aspx">超链接三</a></td>
            </tr>
            <tr>
                <td><a id="A12" href="ImgToWord.aspx">超链接四</a></td>
                <td><a id="A13" href="ImgToWord.aspx">超链接五</a></td>
                <td><a id="A14" href="ImgToWord.aspx">超链接六</a></td>
            </tr>
            <tr>
                <td><a id="A15" href="ImgToWord.aspx">超链接七</a></td>
                <td><a id="A16" href="ImgToWord.aspx">超链接八</a></td>
                <td><a id="A17" href="ImgToWord.aspx">超链接九</a></td>
            </tr>
        </table>
    </div>
    </div>
    </div>
    </div>

Answer 4

本帖最后由 net_lover 于 2011-07-11 16:49:26 编辑

  

Answer 5

稍微改了下你的代码 你拿去试试看
<div>
    <div style="width:500px;height:500px;background-color:blue;z-index:0;position:absolute;">
    <div style="background-color:Red;float:left;z-index:0;width:70px;border:0px" onmouseout="Out('menu','link',event);" onmousemove="menu.style.display='block'">
    <span style="color:White">动态导航</span><br />
    <div id="menu" style="vertical-align:middle;width:230px;height:100px;background-color:Red;z-index:5;display:none;position:absolute;text-align:center;border:0px">
        <table>
            <tr>
                <td><a id="link" href="ImgToWord.aspx">超链接一</a></td>
                <td><a id="A1" href="ImgToWord.aspx">超链接二</a></td>
                <td><a id="A2" href="ImgToWord.aspx">超链接三</a></td>
            </tr>
            <tr>
                <td><a id="A3" href="ImgToWord.aspx">超链接四</a></td>
                <td><a id="A4" href="ImgToWord.aspx">超链接五</a></td>
                <td><a id="A5" href="ImgToWord.aspx">超链接六</a></td>
            </tr>
            <tr>
                <td><a id="A6" href="ImgToWord.aspx">超链接七</a></td>
                <td><a id="A7" href="ImgToWord.aspx">超链接八</a></td>
                <td><a id="A8" href="ImgToWord.aspx">超链接九</a></td>
            </tr>
        </table>
    </div>
    </div>
    <div style="background-color:Yellow;z-index:1;border:0px;width:70px;"  onmousemove="menu1.style.display='block'" onmouseout="Out('menu1','A1',event)"  >
    <span style="color:White">动态导航</span><br />
    <div id="menu1" style="vertical-align:middle;width:230px;height:100px;background-color:Yellow;z-index:5;display:none;position:absolute;text-align:center;border:0px">
        <table>
            <tr>
                <td><a id="A9" href="ImgToWord.aspx">超链接一</a></td>
                <td><a id="A10" href="ImgToWord.aspx">超链接二</a></td>
                <td><a id="A11" href="ImgToWord.aspx">超链接三</a></td>
            </tr>
            <tr>
                <td><a id="A12" href="ImgToWord.aspx">超链接四</a></td>
                <td><a id="A13" href="ImgToWord.aspx">超链接五</a></td>
                <td><a id="A14" href="ImgToWord.aspx">超链接六</a></td>
            </tr>
            <tr>
                <td><a id="A15" href="ImgToWord.aspx">超链接七</a></td>
                <td><a id="A16" href="ImgToWord.aspx">超链接八</a></td>
                <td><a id="A17" href="ImgToWord.aspx">超链接九</a></td>
            </tr>
        </table>
    </div>
    </div>
    </div>
    </div>
<script type="text/javascript">
    function Out(one,two,ee)
    {
        ee.toElement = ee.toElement || ee.relateElement;
        if(ee.toElement.id !=one && ee.toElement.id !=two)
        {
            document.getElementById(one).style.display="none";
        }
    }
    </script>

Answer 6

FF下的问题主要原因有2个,第一是获取Event,第二是Event的toElement方法.不费话,直接上代码.<script type="text/javascript">
function Out(one,two){
    var ee = arguments.callee.caller.arguments[0] || window.event;
   
    if(ee.toElement.id !=one && ee.toElement.id !=two) {
        document.getElementById(one).style.display="none";
    }
}
    
    if(window.addEventListener) { FixPrototypeForGecko(); }      function  FixPrototypeForGecko(){  
        Event.prototype.__defineGetter__("toElement", element_prototype_get_toElement);
    }      function  element_prototype_get_toElement() {  
        var node;  
        if(this.type == "mouseout")  node = this.relatedTarget;  
        else if (this.type == "mouseover") node = this.target;  
        if(!node) return;  
        while (node.nodeType != 1)  
           node = node.parentNode;  
        return node;  
    }
</script>