开发者社区> 问答> 正文

JS关于mouseout事件在父亲元素与子元素之间的小问题

我又来了,想把问题搞明白不想不求甚解

 <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
<style>
    *{margin:0; padding:0; list-style-type:none;}
    nav{height:40px; width:1000px; margin:auto; background:#ccc; position:relative; top:0; left:0;}
    #A li{width:40px; height:40px; float:left; padding-left:20px;}
    #B li{width:60px; height:40px; position:absolute; top:40px; left:0; background:green; display:none;}
</style>
</head>
<body>
<nav onmouseout="xi()">
   <ul id="A">
       <li onmouseover="show(0)">首页1</li>
       <li onmouseover="show(1)">男装2</li>
       <li onmouseover="show(2)">女装3</li>
       <li onmouseover="show(3)">热卖4</li>
   </ul>
    <ul id="B" onmouseout="show2()" onmouseover="show3()">
        <li>商品1</li>
        <li>商品2</li>
        <li>商品3</li>
        <li>商品4</li>
    </ul>
</nav>
</body>
<script>
    var a=document.getElementById('A').getElementsByTagName('li');
    var b=document.getElementById('B').getElementsByTagName('li');
    function show(m){
        b[m].style.display='block';
        b[m].style.left=a[m].offsetLeft+'px';
    }
    function xi(){
        for(var i=0;i< b.length;i++){
            b[i].style.display='none';
        }
    }
        window.setTimeout('xi()',1000);
    function show2(){
        for(var i=0;i< b.length;i++){
            b[i].style.display='none';
        }
    }
</script>
</html>
我认为鼠标离开B, B才会消失, 因为B是nav里的元素啊
但是事实是鼠标一离开nav B就消失了
, 我看别人那么写的都可以啊 我的为什么不行了.... - -!好忧桑
(我也知道nav的height是40px),
昨晚一位好心的网友给了我这个答案让我参考:
onmouseout事件过于敏感,所以通过setTimeout事件来延迟事件的执行就好了.
 someElement.onmouseout = function () {
        // ch在函数顶端已经var过了
        ch = setTimeout("something", 100);

    }; 
(if (ch) {
clearTimeout(ch);
}
至于这个判断要放在什么地方,具体情况具体分析,不过大部分都是放在onmouseover事件的顶部
)

我觉得思路很棒啊,但是不知道怎么用进去
someElement是什么意思啊?
谢谢大家了
解决不了问题很苦恼啊 = =!

展开
收起
小旋风柴进 2016-03-18 14:45:49 2258 0
1 条回答
写回答
取消 提交回答
  • 你不是在nav上写了onmouseout="xi()" 么,也就是意味着鼠标移开,就会调用xi,xi隐藏了所有的节点呀

    2019-07-17 19:06:42
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
JavaScript函数 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载