当我将鼠标焦点放在元素上时，mouseenter和mouseleave会一直触发

mouseenter 和 mouseleave 事件会在鼠标指针进入和离开元素及其子元素时触发

你可以尝试以下方法来解决这个问题：

使用 mouseover 和 mouseout 事件替代 mouseenter 和 mouseleave。这两个事件会在鼠标指针进入和离开元素及其子元素时触发，但它们不会在子元素间移动时触发。

const element = document.querySelector('#your-element');

element.addEventListener('mouseover', () => {
  console.log('Mouse over');
});

element.addEventListener('mouseout', () => {
  console.log('Mouse out');
});

使用 pointerenter 和 pointerleave 事件。这两个事件是针对指针设备的，它们与 mouseenter 和 mouseleave 类似，但它们不会在子元素间移动时触发。

const element = document.querySelector('#your-element');

element.addEventListener('pointerenter', () => {
  console.log('Pointer enter');
});

element.addEventListener('pointerleave', () => {
  console.log('Pointer leave');
});

如果你希望事件只在子元素之间移动时不触发，可以使用一个变量来跟踪鼠标是否真正离开了元素。例如：

const element = document.querySelector('#your-element');
let isMouseInside = false;

element.addEventListener('mouseenter', () => {
  isMouseInside = true;
  console.log('Mouse enter');
});

element.addEventListener('mouseleave', () => {
  isMouseInside = false;
  console.log('Mouse leave');
});

element.addEventListener('mousemove', (event) => {
  if (isMouseInside && event.target !== element) {
    isMouseInside = false;
    console.log('Mouse left the element');
  } else if (!isMouseInside && event.target === element) {
    isMouseInside = true;
    console.log('Mouse entered the element');
  }
});

这段代码会在鼠标进入和离开元素时触发 mouseenter 和 mouseleave 事件，同时还会在鼠标在子元素间移动时更新 isMouseInside 变量。