javascript - 如何避免移入子级时触发父级的onmouseout事件？
本文介绍了javascript - 如何避免移入子级时触发父级的onmouseout事件？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
比如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'
}这篇关于javascript - 如何避免移入子级时触发父级的onmouseout事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
