子元素改变父元素的height属性，导致父元素监听事件失效？

Question

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');
})

初始页面：

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

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

Answer 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() {
     //...
})