JS鼠标事件mouseout与mouseleave以及mouseover与mousemove区别

mouseout:

mouseout是由子元素冒泡而来
鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发，又移入到的另一个元素可能位于前一个元素的外部，也可能是这个元素的子元素。简而言之，mouseout是只要鼠标指针离开了目标元素或者目标元素的所有子元素中的任何一个就会被触发，即使鼠标指针还在目标元素内。也就是离开子元素后，mouseout事件会冒泡到父元素上。直到取消了冒泡或者到达了最外层根元素，才会停止冒泡。

mouseleave：

mouseleave事件是各元素各自触发，不是由子元素冒泡而来
mouseleave是位于元素上方的鼠标移动到元素之外触发，鼠标移动到后代元素也不会触发。即当鼠标指针离开了目标元素以及目标元素的所有子元素以后才会触发。

mouseover：

mouseover是由子元素冒泡而来
mouseover事件是鼠标位于一个元素外部，然后首次移入到另一个元素时触发，又移入的另一个元素可能位于前一个元素的外部，也可能是这个元素的子元素

mousemove：

鼠标指针在元素内部移动时重复触发

如下所示。简单设置2个div，div2是div1的子元素。

<script>
let  div1=document.createElement("div");div1= menuCreate.createDiv("div",{width:"100px",height:"100px",backgroundColor:"red"});div1.addEventListener("mouseover",mouseHandler);div1.addEventListener("mouseout",mouseHandler);div1.addEventListener("mouseleave",mouseHandler);let div2=document.createElement("div");div2= menuCreate.createDiv("div",{width:"50px",height:"50px",backgroundColor:"green"});div1.appendChild(div2);document.body.appendChild(div1);function mouseHandler(e) {console.log(e.type)}## 标题
</script>

鼠标从div1到div2再最后离开先后触发mouseover-mousemove（多次触发）-mouseout-mouseover-mousemove（多次触发）-mouseout-mouseleave```
结果如下

JS鼠标事件mouseout与mouseleave以及mouseover与mousemove区别相关推荐

js 鼠标事件总结 mouseover/mouseout 与mouseenter/mouseleave 傻傻分不清楚?
1. 鼠标事件 mouseenter mouseleave (一对事件鼠标的进入和离开) 不支持冒泡 mouseenter:鼠标从元素外部移到元素内部时触发. mouseleave:鼠标从元素内部移 ...
JS鼠标事件实现动效
1 JS鼠标事件 click鼠标点击事件事件对象.onclick=function() {} mousedown / mouseup 鼠标按下/松开事件事件对象.onmousedown =func ...
js鼠标事件大全-Javascript鼠标事件大全
js鼠标事件大全-Javascript鼠标事件大全 2009年03月11日星期三 14:22 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick 当键盘上的某个键被按下并且释放时 ...
js 鼠标事件_移入移出
mouseover(移入) mouseout(移出) mouseover 此事件类型冒泡,可能引起很多头痛的问题.例如,当鼠标指针移出Inner元素,事件将被发送到Inner元素,然后冒泡到Outer ...
JS鼠标事件（非常详细）
这里写目录标题一. 常用到的鼠标事件鼠标点击鼠标移动鼠标经过鼠标来源鼠标定位鼠标按键一. 常用到的鼠标事件在 JavaScript 中,鼠标事件是 Web 开发中最常用的事件类型,鼠 ...
c语言鼠标事件的详解,JS鼠标事件（非常详细）
在 JavaScript 中,鼠标事件是 Web 开发中最常用的事件类型,鼠标事件类型详细说明如下表所示: 鼠标事件类型事件类型说明 click 单击鼠标左键时发生,如果右键也按下则不会发生.当用 ...
计算机图形学Web前端笔记-图形平移放缩原理及实现（two.js鼠标事件适用所有渲染）
在two.js中,只提供了svg渲染时的鼠标事件,而canvas和webgl并没有提供,这样就对本人造成了很大的困扰,因此学习了下计算机图形学相关的知识,实现了利用two.js绘图在canvas.sv ...
JS 鼠标事件与键盘事件
一.鼠标事件 onclick 鼠标点击左键触发 onmouseover 鼠标经过触发 onmouseout 鼠标离开触发 onfocus 获得鼠标焦点触发 o ...
HTML DOM 事件 —— 鼠标事件 JS鼠标事件
鼠标事件 onclick 当用户点击某个对象时调用的事件句柄. ondblclick 当用户双击某个对象时调用的事件句柄. oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发.. on ...

JS鼠标事件mouseout与mouseleave以及mouseover与mousemove区别

JS鼠标事件mouseout与mouseleave以及mouseover与mousemove区别

JS鼠标事件mouseout与mouseleave以及mouseover与mousemove区别相关推荐

最新文章

热门文章