鼠标离开子菜单区域事件

当鼠标离开子菜单区域可以正常触发，问题是当鼠标移动到子菜单区域上的文字和离开文字时都会触发，这什么原因呢，也没见教课老师处理过啊？

我的index.html:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</a>

</a>

</a>

</div>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</div>

<a href="">手机存储卡</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<a href="">网络机顶盒</a>

</div>

</div>

</div>

</div>

</div>

<a href="">滚筒式洗衣机</a>

<a href="">迷你洗衣机</a>

<a href="">洗烘一体机</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

我的style.css

*{margin:0; padding: 0;}

body{

font-family: "微软雅黑";

}

text-decoration: none;

}

a:link, a:visited{

color:#5e5e5e ;

}

@font-face {

font-family:"myFont";

src: url('../img/font/iconfont.eot');

src: url('../img/font/iconfont.eot') format('embedded-opentype'),

url('../img/font/iconfont.woff') format('woff'),

url('../img/font/iconfont.ttf') format('truetype'),

url('../img/font/iconfont.svg#iconfont') format('svg');

}

/* 整个焦点图+二级菜单区域 */

.main{

width:1200px;

height: 460px;

position: relative;

margin: 30px auto;

overflow: hidden;

}

/* 焦点图 */

.banner{

width: 1200px;

height: 460px;

position: relative;

overflow: hidden;

}

.banner .banner-slide{

width: 1200px;

height: 460px;

background-repeat:no-repeat;

float: left;

}

.banner .slide1{

}

.banner .slide2{

}

.banner .slide3{

}

/* 前后切换焦点图的按钮 */

.button{

width: 40px;

height: 80px;

position: absolute;

left: 244px;

top:50%;

margin-top:-40px;

background: url(../img/arrow.png) center center no-repeat;

transform: rotate(180deg);

}

.button:hover{

background-color:rgba(10,10,10,0.5);

}

.next{

left: auto;

right: 0px;

transform: rotate(0deg);

}

/* 三个小圆点 */

.dots{

position: absolute;

right: 15px;

bottom: 24px;

line-height: 16px;

}

.dots > span{

display: inline-block;

width: 12px;

height: 12px;

border-radius:50%;

box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;

margin-left: 10px;

background-color: rgba(7,17,27,0.4);

cursor: pointer;

}

.dots > span.active{

background-color: rgba(255,255,255,0.8);

box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;

}

/* 主菜单 */

.menu-box{

position: absolute;

left: 0px;

top: 0px;

width: 244px;

height: 460px;

background-color:rgba(7,17,27) ;

opacity:0.25;

z-index: 1;

}

.menu-content{

position: absolute;

left: 0px;

top: 0px;

width: 244px;

height: 460px;

z-index: 2;

}

.menu-content > .menu-item{

height: 64px;

line-height: 66px;

padding: 0 24px;

font-size: 16px;

position: relative;

}

.menu-content > .menu-item > a{

display: block;

color:#fff;

border-bottom:1px solid rgba(255,255,255,0.2);

height: 63px;

padding: 0 8px;

position: relative;

}

.menu-content > .menu-item:last-child > a{

border-bottom:none;

}

.menu-content > .menu-item > a > i{

font-family: "myFont";

position: absolute;

right: 0px;

font-size: 24px;

transform: rotateX(180deg);

font-style: normal;

font-weight: normal;

}

/* 子菜单区域 */

.sub-menu{

position: absolute;

left: 244px;

top:0px;

z-index: 2;

width:730px;

height: 458px;

border:1px solid #d9dde1;

background: #FFFFFF;

box-shadow: 0 4px 8px 0px rgba(0,0,0,0.3);

display: none;

}

/* .hide{

display: none;

} */

.sub-menu > .inner-box{

width: 100%;

height: 100%;

background: url(../img/fe.png) no-repeat;

display: true;

}

.sub-menu > .inner-box > .sub-inner-box{

margin-left:40px ;

width:652px;

overflow: hidden;

}

.sub-menu > .inner-box > .sub-inner-box >.title{

margin-top:28px;

color:#f01414;

line-height: 16px;

font-size:16px;

font-weight:bold;

margin-bottom:30px;

}

.sub-menu > .inner-box > .sub-inner-box >.sub-row{

margin-bottom:25px;

}

.bold{

font-weight: bold;

}

.mr10{

margin-right: 10px ;

}

.ml10{

margin-left: 10px ;

}

我的script.js

var index=0;//当前显示的焦点图索引

//获取左右按钮

var prev = byId("prev");

next = byId("next");

//焦点图

var pics = byId("banner").getElementsByTagName("div");

var dots = byId("dots").getElementsByTagName("span");

var timer=null;//定时器

var menuContent = byId("menu-content"),

menuItems = menuContent.getElementsByClassName("menu-item");

var subMenu = byId("sub-menu"),

innerBoxs = subMenu.getElementsByClassName("inner-box");

var subMenuIndex = 0;//当前显示的子菜单索引

//封装byId获取元素的方法

function byId(id){

return typeof(id) === "string"?document.getElementById(id):id;

}

//封装兼容性绑定handler方法

function addHandler(element,type,handler){

if(element.addEventListner){

element.addEventListner(type,handler,true);

}else if(element.attachEvent){

element.attachEvent("on"+type,handler);

}else{

element["on"+type] =handler;

}

//封装根据index切换焦点图的方法

function changeImg(){

//隐藏所有焦点图+隐藏所有圆点上的active类

for(var i=0;i<pics.length;i++){

pics[i].style.display = "none";

dots[i].className="";

}

//显示当前焦点图

pics[index].style.display = "block";

dots[index].className = "active";

}

//自动轮播

function startAutoPlay(){

timer=window.setInterval(function(){

index++;

if(index>=3) index = 0;

changeImg();

// console.log(index);

},1000);

}

//停止轮播

function stopAutoPlay(){

if(timer) window.clearInterval(timer);

}

//按钮事件

addHandler(next,"click",function(event){

//修改index

index++;

if(index>=3) index=0;

//显示图片

changeImg();

});

addHandler(prev,"click",function(event){

//修改index

index--;

if(index<=-1) index=2;

//显示图片

changeImg();

});

//圆点事件

//遍历圆点

for(var i=0;i<dots.length;i++){

dots[i].setAttribute("data-index",i);

// console.log("圆点索引"+dots[i].dataset.index);

addHandler(dots[i] , "click" , function(event){

//修改焦点图索引

index = this.dataset.index;

changeImg();

});

}

//自动轮播

startAutoPlay();

addHandler( byId("main"),"mouseover",stopAutoPlay );

addHandler( byId("main"),"mouseout", startAutoPlay );

//显示子菜单区域,并显示当前子菜单

//遍历主菜单项

for(var i=0;i<menuItems.length;i++){

//给每个主菜单项添加索引属性

menuItems[i].setAttribute("data-index",i);

//绑定handler

addHandler( menuItems[i],"mouseover",function(event){

//修改当前subMenuIndex

subMenuIndex = this.dataset.index;

// console.log("subMnenuInex" + subMenuIndex);

//显示子菜单区域

subMenu.style.display = "block";

//隐藏所有子菜单

for(var i=0;i<innerBoxs.length;i++){

innerBoxs[i].style.display = "none";

}

//显示当前子菜单

innerBoxs[subMenuIndex].style.display = "block";

// console.log(innerBoxs);

});

}

//移出子菜单区域

addHandler(subMenu, "mouseout" ,function(){

//隐藏

// this.style.display = "none";Z

console.log("woria ");

});

午炎子栩 2019-08-09

源自：项目：JS实现轮播图特效 3-7 菜单脚本（2）

收起

2回答

好帮手慕星星回答被采纳获得+3积分 2019-08-09 19:06:36

你好，可能和事件本身有关系。mouseout事件会冒泡，例如：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #one {
        width: 200px;
        height: 200px;
        background: red;
    }

    #two {
        width: 100px;
        height: 100px;
        background: blue;
    }
    </style>
</head>

<body>
    <div id="one">
        <div id="two"></div>
    </div>
    <script>
    var one = document.getElementById('one');
    var two = document.getElementById('two');
    one.onmouseover = function() {
        console.log('one over')
    }
    one.onmouseout = function() {
        console.log('one out')
    }
    two.onmouseover = function() {
        console.log('two over')
    }
    two.onmouseout = function() {
        console.log('two out')
    }
    </script>
</body>

</html>

在移入子元素之前会触发父元素移出，然后在移入子元素，移入父元素。所以在移入子菜单中子元素的时候，会触发移出子菜单事件。

可以修改为mouseleave事件试试，这个是不冒泡的。

祝学习愉快！

收起回答

好帮手慕星星 2019-08-09 16:02:39

同学你好，

代码中缺少了一步，移入子菜单显示的效果：

添加上这个就没有问题了。

祝学习愉快！

收起回答

提问者午炎子栩 #1

谢谢，确实解决了。但不理解，当鼠标移入内里的文字链接时，会先触发移出子菜单区域，再瞬间触发移入子菜单区域，所以结果是子菜单区域没有隐藏。为什么呢？而且我试验了下，触发的顺序也与是冒泡还是捕获无关，我把那个true改成false,效果是一样的。

2019-08-09 17:06:20