关于鼠标移开事件监听消除current的问题

首页课程实战体系课手记专栏慕课教程

来源：2-8 项目作业

Tano21

2021-04-24 17:11:57

问题描述：

1、我这里的监听删除current的时候，我希望鼠标离开ul.menus的时候再删除。但是实际情况是当鼠标移入两个li之间的margin空间时，这段事件监听就执行了，此时明明鼠标还在ul.menus的区域内，这是什么原因？

// 鼠标离开时删除current

menus.onmouseout = function () {

问题描述：

2、由于这里的当鼠标移入的事件监听需要改a标签的颜色，并且我发现当用检测‘li’的方式的时候a标签把li标签盖住了，触发不了‘li’的事件监听。

所以这里不是按老是上课讲的检测‘li’。想问下老师有经验的程序员会选择检测‘li’还是‘a’。如果这里应该是检测‘li’，那么通常是怎么做的？

//添加监听

menus.onmouseover = function (e)

if (e.target.tagName.toLowerCase() == 'a')

相关代码：

<!DOCTYPE html><html>
<head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        * {            padding: 0;            margin: 0;        }
        li {            list-style: none;        }
        header {            background-color: rgb(228, 100, 139);        }
        .center-wrap {            width: 1100px;            height: 80px;            line-height: 80px;            margin: 0 auto;            overflow: hidden;        }
        .center-wrap h2 {            float: left;        }
        .center-wrap nav {            float: right;            width: 500px;            position: relative;        }
        .center-wrap nav ul {            width: 500px;            height: 80px;            overflow: hidden;        }
        .center-wrap nav ul li {            float: left;            margin-right: 22px;            text-align: center;        }
        .center-wrap nav ul li:last-child {            margin-right: 0;        }
        .center-wrap nav ul li a {            display: block;            width: 60px;            height: 100%;            color: black;            text-decoration: none;        }
        .center-wrap nav ul li a.current {            color: red;        }
        .center-wrap nav ul li button {            width: 90px;            height: 38px;            border: none;            color: white;            background-color: black;            border-radius: 5px;            cursor: pointer;        }
        .center-wrap nav .line {            position: absolute;            width: 40px;            height: 3px;            left: 10px;            top: 56px;            background-color: red;            transition: left .3s ease 0s;            display: none;        }    </style></head>
<body>    <header>        <div class="center-wrap">            <h2>慕课手机</h2>            <nav>                <ul id="menus">                    <li><a href="javascript:;" data-n="0">首页</a></li>                    <li><a href="javascript:;" data-n="1">外观</a></li>                    <li><a href="javascript:;" data-n="2">配置</a></li>                    <li><a href="javascript:;" data-n="3">型号</a></li>                    <li><a href="javascript:;" data-n="4">说明</a></li>                    <li><button>立即购买</button></li>                </ul>                <div class="line" id="line"></div>            </nav>        </div>    </header>    <script>        //获取DOM        var menus = document.getElementById('menus');        var line = document.getElementById('line');        var lisA = document.querySelectorAll('ul li a');
        //添加监听        menus.onmouseover = function (e) {            if (e.target.tagName.toLowerCase() == 'a') {                var t = e.target.getAttribute('data-n');                //去除所有current                for (var i = 0; i < lisA.length; i++) {                    lisA[i].className = '';                }                lisA[t].className = 'current';                //设置line的位置                line.style.display = 'block';                line.style.left = 10 + 82 * t + 'px';            }        }        // 鼠标离开时删除current        menus.onmouseout = function () {            for (var i = 0; i < lisA.length; i++) {                lisA[i].className = '';            }            line.style.display = 'none';        }    </script></body>
</html>