DIV里的事件问题

你可以利用onmouseenter和onmouseleave解决问题

解决方案 »

  1.   

    firefox不兼容哦。。有没有两全其美的方法呢？？
      

  2.   

    先看下这个例子，会看到每次都是先触发onmouseout
    然后几乎是同时（偶尔会相差十几毫秒）触发onmouseover！所以，基本思路是延时执行onmouseout事件，
    即当延时完毕仍未触发onmouseover，则执行onmouseout事件；
    否则，就取消执行onmouseout事件！以下代码仅说明事件触发顺序！
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>dhtml.div.onmouseoutAndonmouseover.html</title>
        <meta name="generator" content="editplus" />
        <meta name="author" content="Gao YiXiang" />
        <meta name="email" content="[email protected]" />
        <meta name="keywords" content="javascript dhtml dom" />
        <meta name="description" content="I love web development." />
        <style type="text/css">
    *
    {
        margin: 0;
    }
    #divOutline
    {
        width: 400px;
        height: 300px;
        background-color: #ffff00;
        text-align: center;
    }
    #spaContent
    {
        display: inline-block;
        color: #ffffff;
        background-color: #000000;
        width: 200px;
        height: 150px;
    }
    #divOutput
    {
        width: 400px;
        height: 300px;
        color: #00ff00;
        background-color: #000000;
        overflow: auto;
    }
        </style>
    </head>
    <body>
        <div id="divOutline">
            <span id="spaContent">123</span>
        </div>
        <div id="divOutput"></div>
    </body>
    <script type="text/javascript">
    <!--
    var oDiv = document.getElementById("divOutline");
    var oOutput = document.getElementById("divOutput");
    oDiv.onmouseout = function()
    {
        // 输出毫秒数。
        oOutput.innerHTML = "<br />" + (new Date()).valueOf() + " oDiv.onmouseout" + oOutput.innerHTML;
    };
    oDiv.onmouseover = function()
    {
        oOutput.innerHTML = "<br />" + (new Date()).valueOf() + " oDiv.onmouseover" + oOutput.innerHTML;
    };
    //-->
    </script>
    </html>
      

  3.   

    FF 下有 window.setTimeout 方法么？！
      

  4.   

    用setTimeout和clearTimeout可是实现一样的onmouseenter和onmouseleave的效果！
    不过setTimeout和clearTimeout好像也是IE特有的！
    俺不用FF，只能提供一个思路了！L@_@K
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>dhtml.div.onmouseoutAndonmouseover.html</title>
        <meta name="generator" content="editplus" />
        <meta name="author" content="Gao YiXiang" />
        <meta name="email" content="[email protected]" />
        <meta name="keywords" content="javascript dhtml dom" />
        <meta name="description" content="I love web development." />
        <style type="text/css">
    *
    {
        margin: 0;
    }
    #divOutline
    {
        width: 400px;
        height: 300px;
        background-color: #ffff00;
        text-align: center;
    }
    #spaContent
    {
        display: inline-block;
        color: #ffffff;
        background-color: #000000;
        width: 200px;
        height: 150px;
    }
    #divOutput
    {
        width: 400px;
        height: 300px;
        color: #00ff00;
        background-color: #000000;
        overflow: auto;
    }
        </style>
    </head>
    <body>
        <div id="divOutline">
            <span id="spaContent">123</span>
        </div>
        <div id="divOutput"></div>
    </body>
    <script type="text/javascript">
    <!--
    // 调试开关。
    var isDebug = false;var oDiv = document.getElementById("divOutline");
    var oOutput = document.getElementById("divOutput");
    var iTimerID = null;
    var iElapsedMilliseconds = 100;
    oDiv.onmouseout = function()
    {
        // 输出毫秒数。
        if (isDebug)
            oOutput.innerHTML = "<br />" + (new Date()).valueOf() + " oDiv.onmouseout" + oOutput.innerHTML;
        else
        {
            iTimerID = setTimeout(alertMouseout, iElapsedMilliseconds);
        }
    };
    oDiv.onmouseover = function()
    {
        if (isDebug)
            oOutput.innerHTML = "<br />" + (new Date()).valueOf() + " oDiv.onmouseover" + oOutput.innerHTML;
        else
        {
            if (iTimerID != null)
            {
                clearTimeout(iTimerID);
            }
        }
    };function alertMouseout()
    {
        alert(oDiv.id + " really mouseout!");
    }
    //-->
    </script>
    </html>
      

  5.   

    俺在google上搜了一下，FF里好像也有
    setTimeout和clearTimeout，lz自己试试看吧！