mouseenter 和 mouseover 的区别
当鼠标移动到元素上时就会触发mouseenter事件
类似mouseover，它们两者之间的差别是
mouseover鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter只会经过自身盒子触发
之所以这样，就是因为mouseenter不会冒泡
跟mouseenter搭配鼠标离开mouseleave同样不会冒泡
代码示例 :
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.father {
width: 300px;
height: 300px;
background-color: pink;
margin: 100px auto;
} .son {
width: 200px;
height: 200px;
background-color: purple;
}
</style>
</head> <body>
<div class="father">
<div class="son"></div>
</div>
<script>
var father = document.querySelector('.father');
var son = document.querySelector('.son');
father.addEventListener('mouseenter', function() {
console.log(11); })
</script>
</body> </html>
mouseenter 和 mouseover 的区别的更多相关文章
- mouseenter和mouseover的区别
mouseover事件-不论鼠标指针穿过被选元素或其子元素,都会触发. mouseenter事件-只有在鼠标指针穿过被选元素时才会触发,对应事件为mouseleave. mouseout事件-不论鼠标 ...
- mouseenter与mouseover的区别
mouseover 事件:只有在鼠标指针穿过被选元素时,才会触发. mouseover 事件:鼠标指针穿过任何子元素,都会触发. 请看例子的演示.
- mouseover，mouseout，mouseenter，mouseleave的区别
相信做前端开发的都听说过“冒泡型事件”吧,<JavaScript高级程序设计>第九章有详细的讲述,但是,在学习的时候一知半解,也没详细去理解,导致最近在工作中碰到了问题:有许多 li 标签 ...
- mouseover与mouseenter与mousemove的区别mouseout与mouseleave的区别
<html> <head> <title></title> </head> <body> <p> 当鼠标进入div1 ...
- mouseover/mouseenter/mouseout/mouseleave的区别
mouseover:鼠标指针穿过被选元素或其子元素,均会触发事件 mouseenter:鼠标指针穿过被选元素时才触发事件 mouseout:鼠标指针离开被选元素或其子元素则触发事件 mouseleav ...
- 3.mouseenter和mouseover事件的区别
<html> <head> <meta charset="UTF-8"> <script src="jquery-3.3.1.j ...
- mouseenter 与 mouseover 区别于选择
mouseover事件, 箭头在子元素移动会触发冒泡事件, 子元素的鼠标箭头可触父元素方法, 相反,mouseenter事件功能与mouseover类似, 但鼠标进入某个元素不会冒泡触发父元素方法. ...
- mouseenter和hover的区别
js中鼠标事件中,mouseenter和hover都可以达到,鼠标悬浮在目标上,触发事件,那么两者效果相同,有什么区别呢. 经过自己亲自试验.发现,mouseenter和hover还是有区别的. ho ...
- IE jquery mouseenter，mouseover超奇葩问题
做了个项目,结构很简单 <div class="index-main" data-url="./img/index_default.jpg"> &l ...
随机推荐
- 5月31日 python学习总结 JavaScript概述
JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECM ...
- 5月10日 python学习总结 单表查询 和 多表连接查询
一. 单表查询 一 语法 select distinct 查询字段1,查询字段2,... from 表名 where 分组之前的过滤条件 group by 分组依据 having 分组之后的过滤条件 ...
- sql注入之查询方式及报错注入
当进行sql注入时,有很多注入会出无回显的情况,其中不回显的原因可能是sql语句查询方式的问题导致的,这个时候我们需要用到相关的报错或盲注进行后续操作,同时作为手工注入时,提前了解或预知器sqkl语句 ...
- 整理分布式锁：业务场景&分布式锁家族&实现原理
1.引入业务场景 业务场景一出现: 因为小T刚接手项目,正在吭哧吭哧对熟悉着代码.部署架构.在看代码过程中发现,下单这块代码可能会出现问题,这可是分布式部署的,如果多个用户同时购买同一个商品,就可能导 ...
- 什么是 Spring Boot？
Spring Boot 是 Spring 开源组织下的子项目,是 Spring 组件一站式解决方案,主要是简化了使用 Spring 的难度,简省了繁重的配置,提供了各种启动器,开发者能快速上手.
- Dubbo 和 Dubbox 之间的区别？
Dubbox 是继 Dubbo 停止维护后,当当网基于 Dubbo 做的一个扩展项目,如 加了服务可 Restful 调用,更新了开源组件等.
- 客户端回调 Watcher ?
客户端 SendThread 线程接收事件通知,交由 EventThread 线程回调 Watcher. 客户端的 Watcher 机制同样是一次性的,一旦被触发后,该 Watcher 就失效了.
- Zookeeper 下 Server 工作状态？
服务器具有四种状态,分别是 LOOKING.FOLLOWING.LEADING.OBSERVING. 1.LOOKING:寻找 Leader 状态.当服务器处于该状态时,它会认为当前集群中没有 Lea ...
- composer安装报错
问题报错:Fatal error: Declaration of Fxp\Composer\AssetPlugin\Repository\AbstractAssetsRepository::searc ...
- Django中间件 (middleware)
中间件是处理django的请求和响应的框架级别的钩子,本质是一个类(直白一点中间件是帮助我们在视图函数执行之前和执行之后都可以做一些额外的操作) 由于其影响的是全局,所以需要谨慎使用,使用不当会影响性 ...