比如span是p的子级，p有个onmouseout事件函数是删除子级span，但是我现在移动到span上，js认为也是触发了p的onmouseout事件了，我大概知道可能和事件冒泡或者事件捕获有关，但具体怎么才能避免触发父级的onmouseout事件呢？
<style>
span,p{
position: absolute;
}
p{
width: 200px;height: 200px;background: red;
}
span{
width: 100px;height: 100px;background: blue;
}
</style>
<script>
window.onload = function(){
var op = document.getElementById('p1')
var oSpan = document.getElementById('span1')
op.onmouseout = function(){
oSpan.style.display = 'none';
};
oSpan.onmouseout = function(ev){
var ev = ev||event;
ev.stopPropagation();//给子级加onmouseout，然后用stopPropgation并没有起到作用
};
};
</script>
</head>
<body>
<p id="p1">
<span id="span1"></span>
</p>
</body>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
mouseout和mouseleave兩者之間有一些不同：mouseout如果移出被選取的元素時，就會觸發mouseout，包括移動到其子元素也會觸發mouseleave同樣也是移出被選取的元素時，會觸發mouseleave，但不包括其子元素，所以除非移出被選取元素範圍，不然都不會觸發mouseleave這邊的例子很直觀的表現了兩者不同
mouseout 和 mouseleave 的不同
就你代碼而已，如果沒有其他需求，就只需要把
op.onmouseout改成op.onmouseleave即可：一开始误解了你的意思，onmouseout事件的触发时机定义就是：在鼠标移出一个元素，或者移出这个元素的子元素，所以会出现你的那种情况，解决办法可试试如下代码：