mouseenter 与mouseover 区别

mouseenter与mouseover有什么不同，也许可以从两方面去讲。看他们是是否支持冒泡或者是否为事件的触发时机；

只有当鼠标指针在对象的边界之外，用户把鼠标移动到对象的边界内时，事件mouseenter才触发。如果鼠标当时正在边界内，用户想要触发该事件，需要把鼠标移动到对象边界外再移动到边界内。因此，mouseenter不支持事件冒泡，所以导致在一个元素的子元素上进入或离开的时候会触发其mouseover和mouseout事件，但是却不会触发mouseenter和mouseleave事件。

小栗子：

演示：

演示代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.3.1.js"></script><style>div{width: 200px;height: 160px;float: left;border: 1px solid hotpink;margin: 10px 10px;}</style>
</head>
<body><script>$(function () {let tep1=0;let tep2=0;$("#dv1>p").mouseover(function () {$(tep1+=1);$("#dv1>p").text(tep1);});$("#dv1").mouseover(function () {$(tep1+=1);$("#dv1>p").text(tep1);});$("#dv2>p").mouseenter(function () {$(tep2+=1);$("#dv2>p").text(tep2);});$("#dv2").mouseenter(function () {$(tep2+=1);$("#dv2>p").text(tep2);});});
</script><div id="dv1"><p style="background-color: pink;">()</p></div>
<div id="dv2"><p style="background-color: pink;">()</p></div></body>
</html>

mouseenter 与mouseover 区别相关推荐

JavaScript 中 mouseenter 与mouseover 区别
mouseenter 与mouseover 区别 mouseenter与mouseover有什么不同,也许可以从两方面去讲. 看他们是是否支持冒泡或者是否为事件的触发时机: 只有当鼠标指针在对象的 ...
前端学习（932）：mouseenter和mouseover区别
事件参数对象下的几个属性 mouseenter与mouseover的区别
事件参数对象下的几个属性 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
鼠标事件中 mouseenter与 mouseover的区别
鼠标事件中 mouseenter与 mouseover的区别: mouseenter: 当鼠标指针穿过元素时,会发生 mouseenter 事件.该事件大多数时候会与mouseleave 事件一起使用 ...
（6）三大系列总结，mouseenter和mouseover的区别
offset.client.scroll三大系列总结 element.offsetWidth 返回自身包括padding.边框.内容区的宽度,返回数值不带单位 element.clientWidth ...
PC端网页特效二：mouseenter 和 mouseover 的区别、动画函数封装
目录 5.mouseenter 和 mouseover 的区别 6.动画函数封装动画实现原理简单动画函数封装动画函数给不同元素记录不同定时器缓动效果原理动画函数多个目标值之间移动缓动函 ...
javascript中mouseenter与mouseover的异同
不知道大家在面试或者工作过程中有没有被 mouseover 和 mouseenter (对应的是 mouseout 和 mouseleave )事件所困扰.自己之前在面试的时候就有被问到诸如mouse ...
学习笔记：mouseenter 与 mouseover，offset
mouseenter 与 mouseover 当鼠标移动到元素上时就会触发mouseenter 事件 mouseover :鼠标经过自身盒子回触发,经过子盒子还会触发 mouseenter:只会经过自 ...
java mouseenter_关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
最近在做的在线考试和课程商城都遇到这样的问题:就是鼠标滑过的时候出现一个层,当鼠标滑到当前层的话mouseover和mouseout在低版本的浏览器会出现闪动的现象,解决这个现象的办法有许多,不过我觉 ...

mouseenter 与mouseover 区别

mouseenter 与mouseover 区别

小栗子：

mouseenter 与mouseover 区别相关推荐

最新文章

热门文章