关于mouseout事件在父亲元素与子元素之间的故事

为什么80%的码农都做不了架构师？>>>   

当鼠标从父亲元素移到子元素上的时候,就会触发瞬间的父亲元素离开事件,主要是onmouseout的事件非常的敏感.这给某些特殊情况下的处理带来了麻烦.

其实解决的方法可以通过在触发函数里加一个判断,判断是否为父亲元素的子元素.不过个人觉得这个方法比较挫^.^(没有任何语言攻击意思),如果子元素比较多,每次都判断,这明显不是很好.

这时候setTimeout横空出世,来拯救我们.其实思路也挺简单,触发离开事件无非就是onmouseout事件过于敏感,所以通过setTimeout事件来延迟事件的执行就好了.

    someElement.onmouseout = function () {
        // ch在函数顶端已经var过了
        ch = setTimeout("something", 100);

    };

就是这么简单,这就解决了问题.

奇怪!不对呀~为啥还要把setTimeout赋给一个变量呢?其实这也有一定的目的.用setTimeout的确函数的执行延缓了,但如果遇到某些无聊的"好"人,故意把鼠标快速的在父亲元素与子元素之间移动,这时我们的延迟就起到了一定的不良效果(具体什么效果,还根据setTimeout里的函数决定),所以我们应该适时的清除这个延迟,只要简单的判断,清除即可

        if (ch) {
            clearTimeout(ch);
        }

至于这个判断要放在什么地方,具体情况具体分析,不过大部分都是放在onmouseover事件的顶部.

转载于:https://my.oschina.net/l3ve/blog/182203