jQuery mouseenter事件无法控制地触发

jQuery mouseenter event firing uncontrollably

本文关键字：控制 mouseenter 事件 jQuery      更新时间：2023-09-26

我想知道是否有人以前遇到过这种情况，或者可以告诉我我的代码出了什么问题。

我有一个在mouseenter上可以加宽和更改文本的按钮。在鼠标离开时，它会恢复到原来的状态。

我在这里架起了一把小提琴。这是相关代码（缩写）：

var labelChanger = function (off, on) {
  $el.off('mouseenter').off('mouseleave');
  $el.mouseenter(function (e) {
      e.stopPropagation();
      changeContent(on);
      $(this).animate({'width': '70%'}, 50);
  }).mouseleave(function (e) {
      e.stopPropagation();
      changeContent(off);
      $(this).animate({'width': '50%'}, 50);
  });
};

它工作正常，但有一件奇怪的事情发生了，如果鼠标从顶部或底部进入盒子，它可能会进入一种状态，鼠标的任何移动都会触发鼠标进入事件（大约25%的时间都会发生这种情况）。你可以看到它被元素"闪烁"触发，我在它下面添加了一些日志。

但是，如果鼠标从侧面进入，它是稳定的，并将按预期行事。

有人知道为什么会这样吗？？？我被难住了。

当使用off()时，您也应该使用on()，而鼠标输入的问题是事件冒泡，当插入新内容时，该新内容上的鼠标输入冒泡，触发新事件等

var labelChanger = function (off, on) {
    $el.off('mouseenter').off('mouseleave');
    $el.on({
        mouseenter: function (e) {
            if (e.target == this) {
                changeContent(on);
                $(this).animate({'width': '70%'}, 50);
            }
        },
        mouseleave(function (e) {
            changeContent(off);
            $(this).animate({'width': '50%'}, 50);
        }
    });
};

FIDDLE

当您修改跨度的内容时，大小的变化（由文本长度的变化引起）会导致鼠标快速"离开"answers"重新进入"跨度。鼠标进入/退出事件从跨度到包装器，触发脚本再次更改它并重新启动链。

相关文章：