mouseover与mouseenter区别
学习笔记。
mouseover：在鼠标移入元素本身或者子元素时都会触发事件，相当于有一个冒泡过程。而且在鼠标移入子元素中时，父元素会显示离开的状态；相应的，当鼠标从子元素移入父元素，子元素也会显示离开状态。与之相对应的是“mouseout”。
mouseenter：仅在鼠标移入元素本身才会触发事件，移入子元素并不会触发事件，相当于没有冒泡过程。与之相对应的是“mouseleave”。
举个例子：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<style>
#div1 {
float: left;
margin: 20px;
width: 200px;
height: 200px;
background-color: red;
}
#div2 {
width: 50px;
height: 50px;
background-color: yellow
}
#div3 {
float: left;
margin: 20px;
width: 200px;
height: 200px;
background-color: blueviolet;
}
#div4 {
width: 50px;
height: 50px;
background-color: aqua;
}
</style>
<script>
$(function(){ $("#div1")
.mouseover(function(){
console.log("进入div1");
})
.mouseout(function(){
console.log("离开div1");
}) $("#div3")
.mouseenter(function(){
console.log("进入div3");
})
.mouseleave(function(){
console.log("离开div3");
}) })
</script>
</head> <body>
<div id="div1">
div1
<div id="div2">
div2
</div>
</div>
<div id="div3">
div3
<div id="div4">
div4
</div>
</div>
</body>
</html>
运行如上代码会得到如下结果：
在后面的测试中将以“
“来表示鼠标位置。
接下来让我们测试左边的div（mouseover）：
1.进入div1：
2、进入div1的子元素div2：
3.离开子元素div2：
4.离开div1：
我们可以很明显的看到：
当鼠标从div1移到子元素div2时，输出了“离开div1”，证明：鼠标移入子元素时，父元素会显示离开状态。
当鼠标从div2移到子元素div1时，也输出了“离开div1”，证明：鼠标移入父元素时，子元素也会显示离开状态。
接下来测试右边的div（mouseenter）：
1.进入div3：
2。进入div3的子元素div4：
3.离开子元素div4：
4。离开div3：
可以看到，仅在移入元素本身才会触发其事件，移入子元素并不会触发事件。
mouseover与mouseenter区别的更多相关文章
- jquery mouseover与mouseenter区别
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- mouseleave,mouseout 和mouseover ，mouseenter区别
鼠标离开事件: mouseleave:只有鼠标离开指定元素时才会触发; mouseout 鼠标离开指定元素或内部子元素都会触发; 鼠标在上事件: mouseover:只有鼠标进入指定元素时才会触发; ...
- jQuery里的mouseover与mouseenter事件类型区别
JQ里面有mouseover和mouseenter 2个事件类型干着差不多的活,用不好经常出现些小问题. 今天我解释一下原理: 事件类型翻译: mouseover 鼠标移上 mouseenter 鼠 ...
- jquery的hover mouseover mouseout mouseenter mouseleave的区别
jquery的hover mouseover mouseout mouseenter mouseleave的区别 1.mouseover mouseout mouseover - 鼠标指针经过任何子元 ...
- mouseover和mouseenter的区别
mouseover和mouseenter都是鼠标事件. mouseover事件,当鼠标穿过被选元素的时候,若此元素有子元素,子元素也会被触发此事件.即是使用mouseover事件,会多次触发此元素. ...
- mouseover,mouseout,mouseenter,mouseleave的区别
1.前言 今天下午参加一个面试,对方问我写不写博客,这时候才猛然意识到好久没写东西了.最近一直在外边实习,每天有很多经历和挑战,但是却没有及时地记录下来,这一点必须得批评自己,以后得经常把自己遇到的问 ...
- jQuery关于mouseover和mouseenter的区别
原生的mouseenter是dom3级的事件,对于jQuery等一些框架已经实现了这个事件.但是它到底跟mouseover有什么区别? jQuery在实现这两个事件的时候,mouseover支持事件冒 ...
- 区别mouseover与mouseenter?
区别mouseover与mouseenter? * mouseover: 在移入子元素时也会触发, 对应mouseout,进入子元素的时候,父元素显示离开状态 * mouseenter: 只在移入当前 ...
- jquery中mouseover和mouseenter的区别
jquery中mouseover和mouseenter的区别 一.总结 一句话总结: 见名知意:enter(进入)和over(在上方)的意思好好思考一下 mouseover就是从子元素回到自己的时候也 ...
随机推荐
- Python2 和 Python3的区别
Python2 和 Python3的区别: 1.python2的默认编码方式是ascii码:python3的默认编码是utf-8. 如果出现乱码或者编码错误,可以使用以下编码在文件头来指定编码: #- ...
- Express 文档（常见问题）
常见问题 我该如何构建我的应用程序? 这个问题没有明确的答案,答案取决于你的应用程序规模和所涉及的团队,为了尽可能灵活,Express在结构方面没有做出任何假设. 在你喜欢的任何目录结构中,路由和其他 ...
- Mybatis自动生成插件对数据库类型为text的处理
2019独角兽企业重金招聘Python工程师标准>>> 如果数据库中的字段为text或者blob这种大文本类型,在使用MybatisGenerator工具自动生成代码的时候会将其进行 ...
- C# 基础知识系列- 14 IO篇 文件的操作 (3)
本篇继续前两篇内容,跟大家介绍一下Path类以及FileSystemInfo这个类的主要方法和属性. 上文提到,在<C# 基础知识系列-IO篇>之文件相关的内容完结之后,会带领大家开发一个 ...
- Vxlan L3
拓扑图: CE1 <CE1>display current-configuration !Software Version V800R013C00SPC560B560 !Last conf ...
- matlab-均值滤波
均值滤波 主要思想为邻域平均法,即用几个像素灰度的平均值来代替每个像素的灰度.有效抑制加性噪声.缺点:容易引起图像模糊,可以对其进行改进,主要避开对景物边缘的平滑处理. 均值滤波器的缺点是存在着边缘模 ...
- restful 架构风格的curd（增删改查）
restful架构 概念:REST指的是一组架构约束条件和原则,如果一个架构符合REST的约束条件和原则,就称之为RESTful架构. restful不是一个专门的技术,他是一个规范.规范就是写写代码 ...
- Anaconda 常用命令大全
帮助目录 检查conda版本 升级当前版本的conda 创建一个新环境 激活新环境 Linux,Mac: Windows: 列出所有的环境 切换环境(activate/deactivate) Linu ...
- Cookie什么？Cookie和Session防御怎么做？
Cookie什么?Cookie和Session防御怎么做? Cookie的概念 Cookie,复数形态Cookies,中文名称为小型文本文件.指某些网站为了辨别用户身份.进行session跟踪而储存在 ...
- 【Hadoop离线基础总结】网站流量日志数据分析系统
目录 点击流数据模型 概述 点击流模型 网站流量分析 网站流量模型分析 网站流量来源 网站流量多维度细分 网站内容及导航分析 网站转化及漏斗分析 流量常见分析角度和指标分类 指标概述 指标分类 分析角 ...