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 ...
随机推荐
- springcloud学习03-spring cloud eureka(下)
7.配置服务提供者(生产者) 7.1.配置resources/application.yml. 值eureka.client.service-url(或serviceUrl).defaultZone是 ...
- phpmyadmin 4.8.1 文件包含漏
一. 启动环境 1.双击运行桌面phpstudy.exe软件 2.点击启动按钮,启动服务器环境 二.代码审计 1.双击启动桌面Seay源代码审计系统软件 3.点击新建项目按钮,弹出对画框中选择(C:\ ...
- 【vue】中英文切换(使用 vue-i18n )
一.准备工作 1.vue-i18n 1.仓库地址 2.兼容性:支持 Vue.js 2.x 以上版本 1-1.安装依赖vue-i18n (c)npm install vue-i18n 1-2.使用 在 ...
- 【freertos】005-启动调度器分析
前言 本节主要讲解启动调度器. 这些都是与硬件相关,所以会分两条线走:posix和cortex m3. 原文:李柱明博客:https://www.cnblogs.com/lizhuming/p/160 ...
- object 转json 相互转换
1.object 转json 2.json转object 参考 https://blog.csdn.net/justry_deng/article/details/80780175
- hook(v16.7测试)?
在无状态组件(如函数式组件)中也能操作state以及其他react特性, 通过useState
- linux设置java环境变量与开机自启
一.下载jdk并放置在指定位置 二.编辑profile文件 vim /etc/profile 或者 将/etc下的profile 文件修改好再上传覆盖源文件 修改方式即添加以下内容至文件最底部即可 ...
- ThreadLocal 是什么?有什么用?
ThreadLocal 是一个本地线程副本变量工具类.主要用于将私有线程和该线程存放的副本对象做一个映射,各个线程之间的变量互不干扰,在高并发场景下,可以实现无状态的调用,特别适用于各个线程依赖不通的 ...
- java-面向对象相关
public class DemoMethodOverload { public static void main(String[] args) { int[] array = new int[]{1 ...
- WSGI是个啥?大白话告诉你wsgi做了什么!
定义: 官方定义:wsgi是Web服务器网关接口(Python Web Server Gateway Interface,缩写为WSGI)是为Python语言定义的Web服务器和Web应用程序或框架之 ...