javascript - 有人可以向我解释为什么我会在这个问题上出现 Stack Overflow 吗？

Question

更新（固定）小提琴在这里

未捕获的 RangeError：超出最大调用堆栈大小

这是一个简单的自定义标题，当鼠标悬停在元素上时会显示。它在几次显示后中断。

function showtitle(title) {

  $('.button').bind('mousemove', function(e){
    $('.message').fadeIn(600);
    var message = $('.message').css({
      'position' : 'absolute',
      'left' : e.pageX,
      'top'  : e.pageY + 25
    });
    var print = title;
    $('.message').html('<span>' + print + '</span>');

  });

}
function hidetitle() {
  $('.message').hide();
}

Answer 1

mousemove每次鼠标移到元素上时，您都会重新绑定事件，但永远不会将其移除。

function moveHandler(e) {
    $('.message').fadeIn(600);

    var message = $('.message').css({
        position: 'absolute',
        left: e.pageX,
        top: e.pageY + 25
    });

    $('.message').empty().append($('<span>', {text: title}));
}

function showtitle(title) {
    $('.button').bind('mousemove', moveHandler);
}

function hidetitle() {
    $('.message').hide();
    $('.button').unbind('mousemove', moveHandler);
}

您也可以一直保持mousemove事件并使用 CSS:hover来显示和隐藏工具提示。

我猜这不是因为浏览器的事件循环，而是因为 jQuery 的事件处理或 jQuery 的动画排队。您还应该在适当的消息中淡入一次，在showtitle，并同时设置其文本；不是每次鼠标移动。

Answer 2

这可能是因为您将 mousemove 绑定到匿名函数。每次触发该事件时，都会再次创建该函数。在将函数绑定到事件之前尝试定义函数。