0

HTML代码:

<div class="d-main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div id="m">4</div>
    <div>5</div>
    <div>6</div>
</div>

CSS样式:

.d-main{
    height: 85px;
    width: 100px;
    background-color: #eee;
    overflow: hidden;
}

JavaScript代码:

var m = document.getElementById('m'),
    dm = document.getElementsByClassName('d-main')[0];    
m.addEventListener('mouseover',function () {
    dm.style.height = '125px';
})
m.addEventListener('mouseout',function (e) {
    e.stopPropagation();
})
dm.addEventListener('mouseout',function () {
    dm.style.height = '85px';
    console.log('ss');
})

初始页面:

clipboard.png

实现的功能是将鼠标放到id为m的div上(也就是4),会将d-main的高度设置为185px(也就是能显示全部div了)

clipboard.png
但鼠标只能在下图红色方框内才会让d-main保持185px的高度,鼠标移到2、1或者6的时候就会变成85px
clipboard.png

Qlly 14
2019-03-15 提问

1 个回答

1

已采纳

MDN上是这么解释 mouseout 的:
mouseout 事件在当指针设备(通常是鼠标)移出了附加侦听器的元素或关闭了它的一个子元素时触发。
需要注意的是,当你从附加侦听器的父元素移动到它的子元素时也会触发,因为您已移出父元素的可视区域。

结论:

  1. 按理,你的鼠标从一个子div滑到另一个子div 都会出发 dm的mouseout事件 dm的高度都会改变
  2. 但巧的是,你把id=4的div的mouseout的事件传播给禁止了,所以4滑到3,4滑到5都不会触发dm的mouseout事件,dm的高度就不会改变了

链接描述
代码改进:

// dm 监听mouseleave事件,不要监听mouseout
dm.addEventListener('mouseleave', function() {
     //...
})

推广链接