关于DIV嵌套onmouseout事件

Question

我做的一个页面上有多层的DIV嵌套，发现写在最外层DIV上面的onmouseout事件在鼠标移到里层的DIV上时也会触发，难道移动到里层DIV层上时被认定为移出了外层DIV？
如果是要怎么办才能让鼠标只要在外层DIV的范围内就不算mouseout?

Answer 1

上个图可能会容易明白点我就是想只要鼠标移出中间那个横幅横幅才消失，但是现在的情况是我鼠标移动到中间那几个图片之间的间距时也执行了onmouseout事件，各位大大看看是怎么回事

Answer 2

在最里层的onmouseout事件执行后 使用return false；

Answer 3

http://www.javaeye.com/topic/361360

Answer 4

ie的bug，给最外层的div设一个背景颜色，白色也行

Answer 5

    <div id="msg1">
        msg
    </div>
    <div onmouseover="ma1();" style="border: solid 1px red:z-index:1">
        m1<br>
        aaa<br>
        aaa<br>
        aaa<br>
        <div onmouseover="ma2();return false;" style="border: solid 1px red; z-index: 10">
            m2<br>
            bbb<br>
            bbb<br>
            bbb<br>
        </div>
    </div>    <script type="text/javascript" language="javascript">
        function ma1() {
            document.getElementById("msg1").innerHTML = "<b>onmouseover on m1</b>";
            var e = window.event;
            try {
                var e = window.event;
                if (!e) e = window.Event;                if (e) {
                    e.returnValue = false;
                    e.cancelBubble = true;
                    e.stopPropagation();
                }
            } catch (c) { }
            return false;
        }        function ma2() {
            document.getElementById("msg1").innerHTML = "onmouseover on m2";
            try {
                var e = window.event;
                if (!e) e = window.Event;                if (e) {
                    e.returnValue = false;
                    e.cancelBubble = true;
                    e.stopPropagation();
                }
            } catch (c) { }
            return false;
        }    </script>

Answer 6

测试了firefox好像只能这样  <div id="msg1">
        msg
    </div>
    <div onmouseover="ma1();" style="border: solid 1px red:z-index:1">
        m1<br>
        aaa<br>
        aaa<br>
        aaa<br>
        <div onmouseover="ma2();" onmouseout="ism2=false;" style="border: solid 1px red; z-index: 10">
            m2<br>
            bbb<br>
            bbb<br>
            bbb<br>
        </div>
    </div>    <script type="text/javascript" language="javascript">
        var ism2 = false;
        function ma1() {
            if (ism2)
                return;
            document.getElementById("msg1").innerHTML = "<b>onmouseover on m1</b>";
            var e = window.event;            var e = window.event;
            if (!e) e = window.Event;            if (e) {
                try {
                    e.returnValue = false;
                    e.cancelBubble = true;
                } catch (c) { }
                try { e.stopPropagation(); } catch (c) { }
            }
            return false;
        }        function ma2() {
            ism2 = true;
            document.getElementById("msg1").innerHTML = "onmouseover on m2";
            var e = window.event;
            if (!e) e = window.Event;            if (e) {
                try {
                    e.returnValue = false;
                    e.cancelBubble = true;
                } catch (c) { }
                try { e.stopPropagation(); } catch (c) { }
            }
        }    </script>