mouseover(鼠标覆盖)

mouseenter(鼠标进入)

二者的本质区别在于,mouseenter不会冒泡,简单的说,它不会被它本身的子元素的状态影响到.但是mouseover就会被它的子元素影响到,在触发子元素的时候,mouseover会冒泡触发它的父元素.(想要阻止mouseover的冒泡事件就用mouseenter)

共同点:当二者都没有子元素时,二者的行为是一致的,但是二者内部都包含子元素时,行为就不同了.

贴出代码:


  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script type="text/javascript" src="js/jquery.min.js"></script>
  7.         <style>
  8.             .div1,
  9.             .div2,
  10.             .div3,
  11.             .div4 {
  12.                 width: 200px;
  13.                 height: 200px;
  14.             }
  15.             
  16.             .div1 {
  17.                 background: darkcyan;
  18.             }
  19.             
  20.             .div2 {
  21.                 background: violet;
  22.             }
  23.             
  24.             .div3 {
  25.                 background: darkgray;
  26.             }
  27.             
  28.             .div4 {
  29.                 background: darkgreen;
  30.             }
  31.             
  32.             p {
  33.                 width: 110px;
  34.                 height: 100px;
  35.                 background: aquamarine;
  36.                 margin: 0 auto;
  37.             }
  38.         </style>
  39.         <script>
  40.             x = 0;
  41.             y = 0;
  42.             z = 0;
  43.             w = 0;
  44.             $(function() {
  45.                 $(".div1").on("mouseenter", function() {
  46.                     $("#s1").text(x += 1)
  47.                 })
  48.                 $(".div2").on("mouseover", function() {
  49.                     $("#s2").text(y += 1)
  50.                 })
  51.                 $(".div2").on("mouseover", function() {
  52.                     $("#s2").text(y += 1)
  53.                 })
  54.                 $(".div3").on("mouseenter", function() {
  55.                     $("#s3").text(z += 1)
  56.                 })
  57.                 $(".div4").on("mouseover", function() {
  58.                     $("#s4").text(w += 1)
  59.                 })
  60.             })
  61.         </script>
  62.     </head>
  63.     <body>
  64.         <div class="div1">
  65.             div1没有子元素(mouseenter)
  66.         </div>
  67.         <span id="s1"></span>
  68.         <div class="div2">
  69.             div2没有子元素(mouseover)
  70.         </div>
  71.         <span id="s2"></span>
  72.         <div class="div3">
  73.             <p id="p1"> div3有子元素p(mouseenter)</p>
  74.         </div>
  75.         <span id="s3"></span>
  76.         <div class="div4">
  77.             <p id="p2">div4有子元素p(mouseover)</p>
  78.         </div>
  79.         <span id="s4"></span>
  80.     </body>
  81. </html>

先测试一下div1和div2都是没有子元素的情况,看下面动图

可以看到当div没有子元素的时候,两者在鼠标覆盖或者进入的时候行为一样.

接下来看一下有子元素的div3和div4,如下动图

可以看到在有子元素的div3在mouseenter也不会触发div3

但是div4就会被在它的子元素被覆盖的时候被触发了,也就是产生了冒泡

最后注意:mouseenter就是在想要阻止冒泡事件发生的时候使用

把代码复制复制粘贴下来自己测试一下就明白了,不过注意: jquery需要的包你需要引入,不然是没有效果的.

代码下载链接: 代码链接

原文:https://blog.csdn.net/lplife/article/details/80436623

mouseover和mouseenter两个事件的区别的更多相关文章

  1. jQuery-使用hover(fn,fn)函数监听mouseover和mouseout两个事件

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. jQuery mouseover与mouseenter,mouseout与mouseleave的区别

    mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...

  3. mouseover与mouseenter,mouseout与mouseleave的区别

    mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件.只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseout ...

  4. 曾经跳过的坑----jQuery mouseover与mouseenter,mouseout与mouseleave的区别

    mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...

  5. jQuery里的mouseover与mouseenter事件类型区别

    JQ里面有mouseover和mouseenter  2个事件类型干着差不多的活,用不好经常出现些小问题. 今天我解释一下原理: 事件类型翻译: mouseover 鼠标移上 mouseenter 鼠 ...

  6. mouseover和mouseenter的区别

    mouseover和mouseenter都是鼠标事件. mouseover事件,当鼠标穿过被选元素的时候,若此元素有子元素,子元素也会被触发此事件.即是使用mouseover事件,会多次触发此元素. ...

  7. 事件处理& 事件委托& 区别mouseover与mouseenter

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别

    轮播中大多会选择mouseover和mouseout  这个时候是没有任何问题的 但当遇到有css3动画的时候,会发现移入移出过快 动画还没加载完成就需要执行下一个动画,完了动画样式就错乱了. 这时候 ...

  9. 一个例子说明mouseover事件与mouseenter事件的区别

    <html> <head> <meta charset="UTF-8"> <title>haha</title> < ...

随机推荐

  1. servlet是什么?servlet到底是啥?

    #说实话 这个鬼servlet我听说过它好多年了,但是我真的不知道它到底是干啥用的.内心里总觉得这是个很复杂的,绝对是让人难以理解的东西,我真的感觉自己很抗拒它,不想知道,不想去了解.可是我还是不得不 ...

  2. unix_timestamp 时间戳函数用法(hive)

    pandas和SQL数据分析实战 https://study.163.com/course/courseMain.htm?courseId=1006383008&share=2&sha ...

  3. SNF快速开发平台2019-权限管理模型-平台服务(多平台\多组织\SAAS\多系统)

    1.1    不同组织机构 通俗的讲,就是一个集团公司,划分几个区域,每个区域都有什么分公司,每个分公司都有哪些部门一样,哪些部门又有那些子部门等. 当然也可以是外贸公司的全球性客户.合作伙伴的分布情 ...

  4. kubernetes篇 容器用户权限控制

    问题起源 问题起源于一个开发BUG:正常运行一段时间的POD,突然有一天运行报错了,错误是没有操作目录的权限,查其原因,原来是镜像被更新了,镜像添加了操作用户,而被操作的目录(NFS目录)并不具备普通 ...

  5. [整理] linux ubuntu 服务器键盘设置错误 完美解决

    根据 原文来源:https://blog.csdn.net/mingjie1212/article/details/48525095 进行修改. 使用命令 dpkg-reconfigure keybo ...

  6. TCP报文结构

    来自:https://blog.csdn.net/qq_32998153/article/details/79680704

  7. (十)redis源码解读

    一.redis工作机制 redis是 单线程,所有命令(set,get等)都会加入到队列中,然后一个个执行. 二.为什么redis速度快? 1.基于内存 2.redis协议resp 简单.可读.效率高 ...

  8. 构建一个java环境的centos系统镜像并上传到阿里云镜像仓库

    编辑dockerfile 文件 FROM centos MAINTAINER zhaoweifeng ENV LANG en_US.UTF-8 RUN /bin/cp /usr/share/zonei ...

  9. kafka生产部署

    kafka真实环境部署规划 1. 操作系统选型 因为kafka服务端代码是Scala语言开发的,因此属于JVM系的大数据框架,目前部署最多的3类操作系统主要由Linux ,OS X 和Windows, ...

  10. 电视CI卡详解

    CAM卡中文名视密卡,它是一种数字视频条件接收模块,是一个连接电视机与外部信号源的设备.它可以将压缩的数字信号转成电视内容,并在电视机上显示出来.CAM卡(亦称大卡)和智能卡(亦称小卡)配合使用,插入 ...