子元素阻止冒泡对祖辈元素本身同类事件的影响，祖辈元素移出事件无法正常响应

我现在碰到的问题是  爷爷辈元素div和孙子辈元素li同宽   父元素是ul   。 
 两个li竖着排列  鼠标移出事件阻止冒泡     div 有10px 宽边框。
鼠标移出快了  移出事件就不执行了   
下面是代码：<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JSSample</title>
    <style>
        *{margin:0;padding: 0;}
        ul{list-style:none;}
        li{font-size: 80px;text-align: center;cursor: pointer;display: none;}
        #main{width: 200px;margin:50px auto;
            border: 10px solid black;
        }
        .li{width: 200px;height: 100px;line-height: 100px;background: gray;}
        .li{width: 200px;height: 100px;line-height: 100px;background: gray;}
        #main .set{display: block;background: red;}
        .on .li{display: block;}
    </style>
</head>
<body>
    <div id="main">
           <li id="li1" class="li set red">宝贝</li>
           <li id="li2" class="li">商铺</li>
    </div>
<script type="text/javascript">    function addEvent (id,event,fn) {
            var ele = getDOM(id)||document;
            if (ele.addEventListener){
                ele.addEventListener(event,fn,false);
            } else if(ele.attachEvent){
                ele.attachEvent("on"+event,fn);
            }
        }
    function getDOM (id) {
            return document.getElementById(id);
        }
    var Clickflag = 0;
    var oSet = document.getElementsByClassName("set")[0];
    addEvent("main","mouseover",function () {
        this.className = "on";
    });
    addEvent("main","mouseout",function () {
        // if(!Clickflag){
            this.className = "";
            oSet.className = "li set";
        // }
    });
    addEvent("li1","mouseover",function (event) {
        this.className = "li set";
        // getDOM("main").className = "on";
        // event.stopPropagation();
    });
    addEvent("li1","mouseout",function (event) {
        this.className = "li";
        event.stopPropagation();
    });
    addEvent("li2","mouseover",function (event) {
        this.className = "li set";
        // getDOM("main").className = "on";
        // event.stopPropagation();
    });
    addEvent("li2","mouseout",function (event) {
        this.className = "li";
        event.stopPropagation();
    });
    // addEvent("li2","click",function (event) {
    //     this.className = "li set";
    //     oSet = this;
    //     event.stopPropagation();
    //     getDOM("main").className ="";
    // });
</script>
</body>
</html>

解决方案 »

  1.   

    改用mouseenter 和 mouseleave 事件。并且不需要阻止冒泡    addEvent("main","mouseenter",function () {
            this.className = "on";
        });
        addEvent("main","mouseleave",function () {
            // if(!Clickflag){
                this.className = "";
                oSet.className = "li set";
            // }
        });
        addEvent("li1","mouseenter",function (event) {
            this.className = "li set";
            // getDOM("main").className = "on";
            // event.stopPropagation();
        });
        addEvent("li1","mouseleave",function (event) {
            this.className = "li";
        });
        addEvent("li2","mouseenter",function (event) {
            this.className = "li set";
            // getDOM("main").className = "on";
            // event.stopPropagation();
        });
        addEvent("li2","mouseleave",function (event) {
            this.className = "li";
        });
      

  2.   

    用 mouseleave 和 mouseenter 试试