mouseover 和 mouseenter

最新推荐文章于 2024-07-26 10:19:04 发布

原创最新推荐文章于 2024-07-26 10:19:04 发布 · 866 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #前端

前端开发专栏收录该内容

42 篇文章

订阅专栏

本文详细探讨了CSS3中mouseover和mouseenter事件的区别，包括它们的触发机制和冒泡行为。mouseover事件在鼠标移入元素及其子元素时都会触发，而mouseenter事件仅在真正进入元素本身时触发，不考虑子元素。同样，mouseout和mouseleave事件在离开元素及子元素时的行为也有所不同。通过示例1至4，展示了不同场景下这些事件的触发顺序和效果，帮助理解它们的使用场景。

mouseover 和 mouseenter

mouseover 经过自身盒子触发，经过子盒子也触发。

【mouseover会冒泡，鼠标从外部移入子元素或从父元素移入子元素，都会先触发子元素的mouseover再触发父元素的mouseover。】

mouseenter 只经过自身盒子触发，不冒泡。

mouseout 和 mouseleave

mouseout ：离开自身盒子触发自身的mouseout，进入子盒子也触发自身的mouseout。

【 mouseout冒泡，从子元素进入父元素时，即触发子元素的mouseout，也会触发父元素的mouseout。】

mouseleave：仅在自身盒子时被触发，不冒泡。

示例1

结论：对于同一个元素，鼠标移入后，会先触发mouseover，再触发mouseenter。

    <style>
      #parent {
        width: 200px;
        height: 200px;
        background-color: bisque;
      }
    </style>
    
	<div id="parent"></div>
	
    <script>
      var parent = document.getElementById("parent");

      parent.addEventListener("mouseenter", function (e) {
        console.log("===mouseenter parent===");
      });
      
      parent.addEventListener("mouseover", function (e) {
        console.log("===mouseover parent===");
      });


    </script>

在这里插入图片描述

示例2

结论：对于重叠的父子元素，mouseover会先触发子盒子再触发父盒子。mouseenter会先进入父盒子再进入子盒子。【字面理解：over：进入盒子上方，enter：“触碰”到盒子】

    <div id="parent">
      <div id="son"></div>
    </div>

    <script>
      var parent = document.getElementById("parent");
      var son = document.getElementById("son");

      parent.addEventListener("mouseover", function (e) {
        console.log("===mouseover parent===");
      });

      parent.addEventListener("mouseenter", function (e) {
        console.log("===mouseenter parent===");
      });

      son.addEventListener("mouseenter", function (e) {
        console.log("===mouseenter son===");
      });

      son.addEventListener("mouseover", function (e) {
        console.log("===mouseover son===");
      });
    </script>

在这里插入图片描述

示例3

结论：对于同一个元素来说，鼠标离开元素，先触发mouseout，再触发mouseleave。

	  var parent = document.getElementById("parent");

      parent.addEventListener("mouseout", function (e) {
        console.log("===mouseout parent===");
      });

      parent.addEventListener("mouseleave", function (e) {
        console.log("===mouseleave parent===");
      });

在这里插入图片描述

示例4

结论：

    <div id="parent">
      <div id="son"></div>
    </div>

    <script>
      var parent = document.getElementById("parent");
      var son = document.getElementById("son");

      parent.addEventListener("mouseout", function (e) {
        console.log("===mouseout parent===");
      });

      parent.addEventListener("mouseleave", function (e) {
        console.log("===mouseleave parent===");
      });

      parent.addEventListener("mouseenter", function (e) {
        console.log("===mouseenter parent===");
      });

      parent.addEventListener("mouseover", function (e) {
        console.log("===mouseover parent===");
      });

      son.addEventListener("mouseout", function (e) {
        console.log("===mouseout son===");
      });

      son.addEventListener("mouseleave", function (e) {
        console.log("===mouseleave son===");
      });

      son.addEventListener("mouseenter", function (e) {
        console.log("===mouseenter son===");
      });

      son.addEventListener("mouseover", function (e) {
        console.log("===mouseover son===");
      });
    </script>