HTML 如何禁用由子元素触发的mouseout事件

在本文中，我们将学习如何通过“mouseleave”事件或使用原生HTML事件的stopPropagation方法来禁用由子元素触发的mouseout事件。

当在子元素上触发“mouseout”事件时，它会冒泡到其DOM层次结构中的父元素，并且会在所有父元素上触发相同的事件。当我们只想在父元素本身上监听“mouseout”事件时，而不是来自其子元素的冒泡事件时，这可能是不需要的。

让我们了解如何通过两种不同的方法来避免上述问题

方法一

为了防止上述不需要的行为，我们可以在父元素上监听“mouseleave”事件，因为与“mouseout”事件不同，“mouseleave”事件不会冒泡，因此可以用于捕获由父元素和子元素分别触发的正确事件。

示例

让我们通过一个示例来理解上述方法。

文件名：index.html

<html lang="en">
<head>
   <title>How to disable mouseout events triggered by child elements?</title>
</head>
<body>
  <h3>How to disable mouseout events triggered by child elements?</h3>
  <div id="parent" style="width: 300px; height: 300px; background-color: #ccc;">
      <div id="child" style="width: 100px; height: 100px; background-color: #999;"></div>
   </div>

   <script>  
      const parentElement = document.getElementById('parent');
      const childElement = document.getElementById('child');

      childElement.addEventListener('mouseout', () => {
         console.log('mouseout on child element');
      });

      parentElement.addEventListener('mouseleave', () => {
         console.log('mouseleave on parent element');
      });

   </script>  
</body>
</html>

方法二

在这个方法中，我们将使用mouseout事件的stopPropagation方法来阻止其默认的冒泡行为，从而阻止由子元素触发的mouseout事件出现在父元素上。

示例1

让我们通过一个例子来理解上述方法 —

文件名：index.html

<html lang="en">
<head>
   <title>How to disable mouseout events triggered by child elements?</title>
</head>
<body>
   <h3>How to disable mouseout events triggered by child elements?</h3>
   <div id="parent" style="width: 300px; height: 300px; background-color: #ccc;">
      <div id="child" style="width: 100px; height: 100px; background-color: #999;"></div>
   </div>

   <script>  
      const parentElement = document.getElementById('parent');
      const childElement = document.getElementById('child');

      childElement.addEventListener('mouseout', (event) => {
         event.stopPropagation();
         console.log('mouseout on child element');
      });

      parentElement.addEventListener('mouseout', () => {
         console.log('mouseout on parent element');
      });
   </script>  
</body>
</html>

示例2

在本示例中，我们将按照上述代码模式操作，并使用CSS的pointer-events属性禁用mouseout事件。

文件名：index.html

<html lang="en">
<head>
   <title>How to disable mouseout events triggered by child elements?</title>
   <style>
      .disable-mouseout {
         pointer-events: none;
      }
   </style>
</head>
<body>
   <h3>How to disable mouseout events triggered by child elements?</h3>
   <div id="parent" style="width: 300px; height: 300px; background-color: #ccc;">
      <div id="child" style="width: 100px; height: 100px; background-color: #999;"></div>
   </div>

   <script>
      const parentElement = document.getElementById('parent');
      const childElement = document.getElementById('child');

      childElement.addEventListener('mouseover', () => {
         parentElement.classList.add('disable-mouseout');
      });

      childElement.addEventListener('mouseout', () => {
         parentElement.classList.remove('disable-mouseout');
      });

      parentElement.addEventListener('mouseout', () => {
         console.log('mouseout on parent element');
      });
   </script>
</body>
</html>

示例3

在此示例中，我们将遵循上述代码模式，并使用JavaScript的event.preventDefault()方法禁用mouseout事件。

文件名：index.html

<html lang="en">
<head>
   <title>How to disable mouseout events triggered by child elements?</title>
</head>
<body>
   <h3>How to disable mouseout events triggered by child elements?</h3>
   <div id="parent" style="width: 300px; height: 300px; background-color: #ccc;">
      <div id="child" style="width: 100px; height: 100px; background-color: #999;"></div>
   </div>

   <script>
      const parentElement = document.getElementById('parent');
      const childElement = document.getElementById('child');

      childElement.addEventListener('mouseout', (event) => {
         event.preventDefault();
      console.log('mouseout on child element');
      });

      parentElement.addEventListener('mouseout', () => {
         console.log('mouseout on parent element');
      });
   </script>
</body>
</html>