Question

子元素触发了父元素的onmouseout事件。怎么解决能让子元素不触发

<style>
div{
position:absolute;width:100px;height:100px;background:#555;
}

</style>
<div onmouseout='alert()'>
<button>123</button>
</div>
为什么鼠标移到按钮123上 还要出发alert() 怎么解决 会的话代码加上啊
网上的什么stopPropagation()都没有用
用JavaScript哦 不要用jquery 我不懂 他

Answer 1

这就是一个阻止冒泡，你搜出来的那个是jq里面封装的阻止冒泡的方法，很好用，js里面相对来说复杂很多
function stopPropagation(e) {
e = e || window.event;
if(e.stopPropagation) { //W3C阻止冒泡方法
e.stopPropagation();
} else {
e.cancelBubble = true; //IE阻止冒泡方法
}
}
document.getElementById('need_hide').onclick = function(e) {
stopPropagation(e);
}

追问

你自己运行下 你看行不行。鼠标移动到button上和移出 还会alert

Answer 2

把父元素的mouseout也写了不就行了
$(parentNode).on("mouseout",function(){
//啥都不写就行了

});
//好嘛，不用jq
parentNode.onmouseout = function(e){
//啥都不要写

}

靠，你哪里来的父元素，就是body了嘛。。。。
完了，被误导了
你这个我知道一个办法，用JQ的
$(nageDiv).on("mouseleave",function(){
alert("DS");
//OK啦。这样保证不会移到btn还触发alert了
})

Answer 3

当你滑过子元素的时候必须经过父级元素，当你离开子元素时也是要经过父级元素，所以就触发了onmouseout

追问

怎么解决