0

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

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

我在这里设置了一个jsfiddle。这是相关代码（缩写）：

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);
  });
};

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

但如果鼠标从侧面进入，它是稳定的，会按预期动作。

有人知道为什么吗？？？我难住了。

4

2 回答 2

1

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

于 2013-02-14T21:44:00.563 回答
1

使用时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);
        }
    });
};

小提琴

于 2013-02-14T21:58:22.940 回答