js 鼠标事件mouseover和mouseout在父盒子移到子盒子中的思考

mouseover事件一般不推荐使用不过最近遇到了一个问题，就思考了一下。

如上图所示：
HTML代码如下

  <div class="father"><div class="son"></div></div>

js代码

var father = document.querySelector('.father')
var son = document.querySelector('.son')
father.addEventListener('mouseover',function(e){console.log("移入了")})father.addEventListener('mouseout',function(e){console.log("移出了")})

从父盒子移动到子盒子过程中先打印移出在打印移入。
原因思考：
1、鼠标移动到子盒子上，浏览器默认鼠标离开父盒子了所以打印“移出”，但是已经移到子盒子中，在子盒子中有移入事件，但是没有事件对应函数，然后事件冒泡给了父盒子，父盒子有mouseover事件对应函数，所以打印了“移入”。犹豫有一个冒泡过程所以先打印“移出”在打印与“移入”。
为了验证猜想：
js代码添加阻止冒泡事件

var father = document.querySelector('.father')
var son = document.querySelector('.son')
father.addEventListener('mouseover',function(e){console.log("移入了")})father.addEventListener('mouseout',function(e){console.log("移出了")})son.addEventListener('mouseover',function(e){// console.log("son移入了");e.stopPropagation()
})son.addEventListener('mouseout',function(e){// console.log("son移出了")e.stopPropagation()
})

如下图所示就只有移出，没有移入了

以上是个人愚见，如有错误请大牛不吝赐教！

js 鼠标事件mouseover和mouseout在父盒子移到子盒子中的思考相关推荐

JS鼠标事件mouseout与mouseleave以及mouseover与mousemove区别
JS鼠标事件mouseout与mouseleave以及mouseover与mousemove区别 mouseout: mouseout是由子元素冒泡而来鼠标指针位于一个元素上方,然后用户将其移入另一 ...
JS鼠标事件（非常详细）
这里写目录标题一. 常用到的鼠标事件鼠标点击鼠标移动鼠标经过鼠标来源鼠标定位鼠标按键一. 常用到的鼠标事件在 JavaScript 中,鼠标事件是 Web 开发中最常用的事件类型,鼠 ...
JS鼠标事件实现动效
1 JS鼠标事件 click鼠标点击事件事件对象.onclick=function() {} mousedown / mouseup 鼠标按下/松开事件事件对象.onmousedown =func ...
c语言鼠标事件的详解,JS鼠标事件（非常详细）
在 JavaScript 中,鼠标事件是 Web 开发中最常用的事件类型,鼠标事件类型详细说明如下表所示: 鼠标事件类型事件类型说明 click 单击鼠标左键时发生,如果右键也按下则不会发生.当用 ...
js鼠标事件大全-Javascript鼠标事件大全
js鼠标事件大全-Javascript鼠标事件大全 2009年03月11日星期三 14:22 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick 当键盘上的某个键被按下并且释放时 ...
父盒子高度为子盒子总高度自动撑满 height: fit-content； //设置内容高度
给父盒子设置高度=子盒子总高度属性: height: fit-content; //设置内容高度
js 鼠标事件总结 mouseover/mouseout 与mouseenter/mouseleave 傻傻分不清楚?
1. 鼠标事件 mouseenter mouseleave (一对事件鼠标的进入和离开) 不支持冒泡 mouseenter:鼠标从元素外部移到元素内部时触发. mouseleave:鼠标从元素内部移 ...
leaflet鼠标进出事件 mouseover和mouseout （示例代码009）
第009个点击查看专栏目录本示例的目的是介绍演示如何在vue+leaflet中给marker添加鼠标事件,这里用到了mouseover和mouseout. 直接复制下面的 vue+leaflet源 ...
鼠标事件(mouseover和mouseenter)
下拉菜单案例前言一.mouseover和mouseenter的不同点 1.事件的触发时机 2.是否支持冒泡二.案例总结前言自己做下拉菜单的时候,突然发现mouseover和mouseent ...

js 鼠标事件mouseover和mouseout在父盒子移到子盒子中的思考

js 鼠标事件mouseover和mouseout在父盒子移到子盒子中的思考相关推荐

最新文章

热门文章