比如span是div的子级，div有个onmouseout事件函数是删除子级span，但是我现在移动到span上，js认为也是触发了div的onmouseout事件了，我大概知道可能和事件冒泡或者事件捕获有关，但具体怎么才能避免触发父级的onmouseout事件呢？
<style>
span,div{
position: absolute;
}
div{
width: 200px;height: 200px;background: red;
}
span{
width: 100px;height: 100px;background: blue;
}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1')
var oSpan = document.getElementById('span1')
oDiv.onmouseout = function(){
oSpan.style.display = 'none';
};
oSpan.onmouseout = function(ev){
var ev = ev||event;
ev.stopPropagation();//给子级加onmouseout，然后用stopPropgation并没有起到作用
};
};
</script>
</head>
<body>
<div id="div1">
<span id="span1"></span>
</div>
</body>mouseout 和 mouseleave 兩者之間有一些不同：
mouseout 如果移出被選取的元素時，就會觸發 mouseout，包括移動到其子元素也會觸發mouseleave 同樣也是移出被選取的元素時，會觸發 mouseleave，但不包括其子元素，所以除非移出被選取元素範圍，不然都不會觸發 mouseleave
這邊的例子很直觀的表現了兩者不同
mouseout 和 mouseleave 的不同
就你代碼而已，如果沒有其他需求，就只需要把 oDiv.onmouseout 改成 oDiv.onmouseleave 即可：
oDiv.onmouseleave = function() {
oSpan.style.display = 'none'
}一开始误解了你的意思，onmouseout事件的触发时机定义就是：在鼠标移出一个元素，或者移出这个元素的子元素，所以会出现你的那种情况，解决办法可试试如下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
width: 200px;height: 200px;background: red;
}
#span1{
width: 100px;height: 100px;background: blue;display: inline-block;
}
</style>
<script type="text/javascript">
function isMouseLeaveOrEnter(e, handler) {
var reltg=e.relatedTarget?e.relatedTarget:e.type=='mouseout'?e.toElement:e.fromElement;
while (reltg && reltg != handler){
reltg = reltg.parentNode;
}
return (reltg != handler);
}
window.onload=function(){
var oDiv = document.getElementById("div1");
var oSpan = document.getElementById("span1");
oDiv.onmouseout=function(ev){
var ev=ev||window.event;
if(!isMouseLeaveOrEnter(ev,oDiv)){
return false;
}
oSpan.style.display = 'none';
}
}
</script>
</head>
<body>
<div id="div1">
<span id="span1"></span>
</div>
</body>
</html>