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就是从子元素回到自己的时候也 ...
随机推荐
- [Windows API] Listing the Files in a Directory，可用来数文件夹下有多少个子文件（夹）
转载 #include <windows.h> #include <tchar.h> #include <stdio.h> #include <strsafe ...
- SpringBoot应用操作Rabbitmq（topic交换器高级操作）
一.topic交换器为主题交换器,可以根据路由key模糊匹配 实现模型图 二.实战 1.引入maven <dependency> <groupId>org.springfram ...
- c语言实现数字的倒序输出
c语言实现数字的倒序输出, 例如: 输入数值:1234倒序输出: 4321 #include <stdio.h> int main(int argc, char *argv[]) { in ...
- 【Linux常见命令】ip命令
ip命令是用来配置网卡ip信息的命令,且是未来的趋势,重启网卡后IP失效. ip - show / manipulate routing, devices, policy routing and tu ...
- 基于Swoole的HTTP/HTTPS代理
N行代码实现一个简单的代理服务器 <?php /** * Web代理服务器(支持http/https) * @author zhjx922 */ class WebProxyServer { p ...
- 数学--数论--HDU 1299 +POJ 2917 Diophantus of Alexandria （因子个数函数+公式推导）
Diophantus of Alexandria was an egypt mathematician living in Alexandria. He was one of the first ma ...
- Redis 到底是单线程还是多线程？我要吊打面试官！
最近在Java技术栈公众号发布的一篇文章,其中有一道题: Redis是多线程还是单线程?(回答单线程的请回吧,为什么请回,请往下看) 好些粉丝在后台问我:为什么请回,Redis不是单线程吗? 大家注意 ...
- Spring官网阅读（一）容器及实例化
从今天开始,我们一起过一遍Spring的官网,一边读,一边结合在路神课堂上学习的知识,讲一讲自己的理解.不管是之前关于动态代理的文章,还是读Spring的官网,都是为了之后对Spring的源码做更全面 ...
- Git使用教程之SSH连接方式配置（二）
什么是GitHub?这个网站就是提供Git仓库托管服务的. 什么是SSH Key?你的本地Git仓库和GitHub仓库之间的传输是通过SSH加密的,大白话理解就是这两个仓库如果要进行远程同步,则我们需 ...
- 设计模式之GOF23访问者模式
访问者模式Visitor 模式动机:对于存储在一个集合中的对象,他们可能具有不同的类型(即使有一个公共的接口),对于该集合中的对象,可以接受一类称为访问者的对象来访问,不同访问者的访问方式也不同 定义 ...