Question

我想知道是否有人之前遇到过此问题，或者可以告诉我我的代码有什么问题。

我在mouseenter上有一个按钮，可以扩展和更改文本。在mouseleave上，它恢复到其原始状态。

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％的时间。）你可以通过“闪烁”元素看到它触发，我在它下面添加了一个类别的日志。

但是如果鼠标从侧面进入，它会稳定并且会按预期运行。

有谁知道这是为什么???我很难过。

Answer 1

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

Answer 2

使用off()时，您还应该使用on()，而mouseenter的问题在于事件会冒泡，并且在插入新内容时，新内容上的mouseenter会冒泡，触发尝试新事件等。尝试类似：

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

jQuery mouseenter事件无法控制地发射

2 个答案: