多个子元素触发父元素事件

可以在 onmouseout 的时侯得到触发事件的对象是否是 最外层的那个div ,
如果是的话在执行你的其它操作

解决方案 »

  1.   

    <!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>无标题页 </title>
            <script type="text/javascript">
                function Over(evt){
    var e = evt || window.event;
                    var div = document.getElementById('divOut'); if( div.contains(e.fromElement) && div.contains(e.toElement)){
    return;
    }
                    div.attachEvent("onmousemove", Move);
                    div.attachEvent("onmouseout", Out);
                    
                    document.getElementById("status").value = "over";
                    document.getElementById("src").value = event.srcElement.outerHTML;
                }
                
                function Out(evt){
    var e = evt || window.event;
                    var div = document.getElementById('divOut');
    if(div.contains(e.fromElement) && div.contains(e.toElement)){
    return;
    }
                    document.getElementById("status").value = "out";
                    document.getElementById("src").value = event.srcElement.outerHTML;
                    
                    var div = document.getElementById('divOut');
                    div.releaseCapture();
                }
                
                function Move(evt){
    var e = evt || window.event;
                    document.getElementById("status").value = "move";
                    document.getElementById("src").value = event.srcElement.outerHTML;
                }
            </script>
        </head>
        <body>
            <input type="text" id="status" /><input type="text" id="src" style="width:300px;"/>
            <div onmouseover="Over(event)" style="z-index:100;background-color:Blue; width:100px;" id="divOut">
                <a id="link" href="#" style="z-index:50;">链接 </a>
                <div id="divIn" style="height:50px;width:50px;background-color:Red;z-index:30;">
                </div>
            </div>
        </body>
    </html>