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

当鼠标从父元素移动到子元素时，会触发子元素的 mouseout 事件，这可能会影响到应用程序的功能。为了解决这个问题，可以使用以下两种方法：

方法一：

在父元素上设置 CSS 属性 pointer-events: none;，这样子元素就不会触发任何鼠标事件了，包括 mouseout 事件。

.parent {
  pointer-events: none;
}

方法二：

在子元素上使用 mouseenter 和 mouseleave 事件代替 mouseover 和 mouseout 事件，并阻止事件冒泡。

// 阻止事件冒泡的函数
function stopPropagation(event) {
  if (event.stopPropagation) {
    event.stopPropagation();
  } else {
    event.cancelBubble = true;
  }
}

const parent = document.querySelector('.parent');
const child = document.querySelector('.child');

child.addEventListener('mouseenter', () => {
  // 鼠标进入子元素时添加样式
  child.classList.add('active');
});

child.addEventListener('mouseleave', () => {
  // 鼠标离开子元素时移除样式
  child.classList.remove('active');
});

parent.addEventListener('mouseleave', (event) => {
  // 鼠标离开父元素时判断鼠标是否在子元素内
  const isInsideChild = child.contains(event.target);
  if (!isInsideChild) {
    // 如果不在子元素内，就执行相应的操作
    console.log('鼠标已经离开了父元素');
  }
});

// 阻止 mouseleave 事件冒泡到父元素
child.addEventListener('mouseleave', (event) => {
  stopPropagation(event);
});

在这个例子中，当鼠标进入子元素时，我们可以添加一个 active 类来改变子元素的外观。当鼠标离开子元素时，我们可以移除 active 类。为了避免触发父元素的 mouseleave 事件，我们需要阻止 mouseleave 事件冒泡到父元素。然后我们在父元素的 mouseleave 事件处理程序中检查鼠标是否在子元素内，如果不在子元素内，我们就可以执行相应的操作了。

以上两种方法都可以禁用子元素触发的 mouseout 事件，具体使用哪种方法取决于你的具体需求。