mouseover和mouseenter两个事件的区别
mouseover(鼠标覆盖)
mouseenter(鼠标进入)
二者的本质区别在于,mouseenter不会冒泡,简单的说,它不会被它本身的子元素的状态影响到.但是mouseover就会被它的子元素影响到,在触发子元素的时候,mouseover会冒泡触发它的父元素.(想要阻止mouseover的冒泡事件就用mouseenter)
共同点:当二者都没有子元素时,二者的行为是一致的,但是二者内部都包含子元素时,行为就不同了.
贴出代码:
-
<!DOCTYPE html>
-
<html>
-
-
<head>
-
<meta charset="UTF-8">
-
<title></title>
-
<script type="text/javascript" src="js/jquery.min.js"></script>
-
<style>
-
.div1,
-
.div2,
-
.div3,
-
.div4 {
-
width: 200px;
-
height: 200px;
-
}
-
-
.div1 {
-
background: darkcyan;
-
}
-
-
.div2 {
-
background: violet;
-
}
-
-
.div3 {
-
background: darkgray;
-
}
-
-
.div4 {
-
background: darkgreen;
-
}
-
-
p {
-
width: 110px;
-
height: 100px;
-
background: aquamarine;
-
margin: 0 auto;
-
}
-
</style>
-
<script>
-
x = 0;
-
y = 0;
-
z = 0;
-
w = 0;
-
-
$(function() {
-
$(".div1").on("mouseenter", function() {
-
$("#s1").text(x += 1)
-
})
-
$(".div2").on("mouseover", function() {
-
$("#s2").text(y += 1)
-
})
-
$(".div2").on("mouseover", function() {
-
$("#s2").text(y += 1)
-
})
-
$(".div3").on("mouseenter", function() {
-
$("#s3").text(z += 1)
-
})
-
$(".div4").on("mouseover", function() {
-
-
$("#s4").text(w += 1)
-
})
-
})
-
</script>
-
</head>
-
-
<body>
-
<div class="div1">
-
div1没有子元素(mouseenter)
-
</div>
-
<span id="s1"></span>
-
<div class="div2">
-
div2没有子元素(mouseover)
-
</div>
-
<span id="s2"></span>
-
<div class="div3">
-
<p id="p1"> div3有子元素p(mouseenter)</p>
-
</div>
-
<span id="s3"></span>
-
<div class="div4">
-
<p id="p2">div4有子元素p(mouseover)</p>
-
</div>
-
<span id="s4"></span>
-
</body>
-
-
</html>
先测试一下div1和div2都是没有子元素的情况,看下面动图
可以看到当div没有子元素的时候,两者在鼠标覆盖或者进入的时候行为一样.
接下来看一下有子元素的div3和div4,如下动图
可以看到在有子元素的div3在mouseenter也不会触发div3
但是div4就会被在它的子元素被覆盖的时候被触发了,也就是产生了冒泡
最后注意:mouseenter就是在想要阻止冒泡事件发生的时候使用
把代码复制复制粘贴下来自己测试一下就明白了,不过注意: jquery需要的包你需要引入,不然是没有效果的.
代码下载链接: 代码链接
原文:https://blog.csdn.net/lplife/article/details/80436623
mouseover和mouseenter两个事件的区别的更多相关文章
- jQuery-使用hover(fn,fn)函数监听mouseover和mouseout两个事件
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...
- mouseover与mouseenter,mouseout与mouseleave的区别
mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件.只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseout ...
- 曾经跳过的坑----jQuery mouseover与mouseenter,mouseout与mouseleave的区别
mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...
- jQuery里的mouseover与mouseenter事件类型区别
JQ里面有mouseover和mouseenter 2个事件类型干着差不多的活,用不好经常出现些小问题. 今天我解释一下原理: 事件类型翻译: mouseover 鼠标移上 mouseenter 鼠 ...
- mouseover和mouseenter的区别
mouseover和mouseenter都是鼠标事件. mouseover事件,当鼠标穿过被选元素的时候,若此元素有子元素,子元素也会被触发此事件.即是使用mouseover事件,会多次触发此元素. ...
- 事件处理& 事件委托& 区别mouseover与mouseenter
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
轮播中大多会选择mouseover和mouseout 这个时候是没有任何问题的 但当遇到有css3动画的时候,会发现移入移出过快 动画还没加载完成就需要执行下一个动画,完了动画样式就错乱了. 这时候 ...
- 一个例子说明mouseover事件与mouseenter事件的区别
<html> <head> <meta charset="UTF-8"> <title>haha</title> < ...
随机推荐
- servlet是什么?servlet到底是啥?
#说实话 这个鬼servlet我听说过它好多年了,但是我真的不知道它到底是干啥用的.内心里总觉得这是个很复杂的,绝对是让人难以理解的东西,我真的感觉自己很抗拒它,不想知道,不想去了解.可是我还是不得不 ...
- unix_timestamp 时间戳函数用法(hive)
pandas和SQL数据分析实战 https://study.163.com/course/courseMain.htm?courseId=1006383008&share=2&sha ...
- SNF快速开发平台2019-权限管理模型-平台服务(多平台\多组织\SAAS\多系统)
1.1 不同组织机构 通俗的讲,就是一个集团公司,划分几个区域,每个区域都有什么分公司,每个分公司都有哪些部门一样,哪些部门又有那些子部门等. 当然也可以是外贸公司的全球性客户.合作伙伴的分布情 ...
- kubernetes篇 容器用户权限控制
问题起源 问题起源于一个开发BUG:正常运行一段时间的POD,突然有一天运行报错了,错误是没有操作目录的权限,查其原因,原来是镜像被更新了,镜像添加了操作用户,而被操作的目录(NFS目录)并不具备普通 ...
- [整理] linux ubuntu 服务器键盘设置错误 完美解决
根据 原文来源:https://blog.csdn.net/mingjie1212/article/details/48525095 进行修改. 使用命令 dpkg-reconfigure keybo ...
- TCP报文结构
来自:https://blog.csdn.net/qq_32998153/article/details/79680704
- (十)redis源码解读
一.redis工作机制 redis是 单线程,所有命令(set,get等)都会加入到队列中,然后一个个执行. 二.为什么redis速度快? 1.基于内存 2.redis协议resp 简单.可读.效率高 ...
- 构建一个java环境的centos系统镜像并上传到阿里云镜像仓库
编辑dockerfile 文件 FROM centos MAINTAINER zhaoweifeng ENV LANG en_US.UTF-8 RUN /bin/cp /usr/share/zonei ...
- kafka生产部署
kafka真实环境部署规划 1. 操作系统选型 因为kafka服务端代码是Scala语言开发的,因此属于JVM系的大数据框架,目前部署最多的3类操作系统主要由Linux ,OS X 和Windows, ...
- 电视CI卡详解
CAM卡中文名视密卡,它是一种数字视频条件接收模块,是一个连接电视机与外部信号源的设备.它可以将压缩的数字信号转成电视内容,并在电视机上显示出来.CAM卡(亦称大卡)和智能卡(亦称小卡)配合使用,插入 ...