javascript - 动态创建子元素时如何避免再次调用hover/mouseenter

Question

每当用户将鼠标悬停在 A 上时，我就会在元素(例如 A)内动态创建一个框。然后用鼠标移动框 B。 B 仅应在用户将鼠标悬停在 A 上时出现(即，它在 mouseleave 时被删除)。

不幸的是，如果我在 B 内动态创建元素，当鼠标移到它们上方时，将再次调用悬停事件(创建一个新的 B)。当我在鼠标移动时动态创建 B 的子级时，似乎会发生此问题。起初我认为这与冒泡和需要委托(delegate)有关，但现在我觉得这与我清空盒子并再次填充它有关(从而导致悬停事件再次触发)？

这个例子说明了我遇到的问题:

https://jsfiddle.net/shzy6gtx/

function positionBox(element, position) {
    element.css({
        top: position - element.parent().offset().top - 10,
    });
    element.empty();
    jQuery('<span />').appendTo(element).text(position);    
}

$(document).bind('mousemove', function(e) {
    if ($('#theBox').length <= 0)
        return;
    positionBox($('#theBox'), e.pageY);
});

$('.hover').hover(function(e) {
    var innerBox = jQuery('<div />', {
        id: 'theBox',
        class: 'inner',
    }).appendTo(this);
    positionBox(innerBox, e.pageY);
}, function(e) {
    $('#theBox').remove();
});

这就是它应该如何工作(没有动态创建的 span 标签):

https://jsfiddle.net/dffyt6gx/

如果这是我无法解决的问题，还能如何实现？

Answer 1

对我来说，问题实际上看起来是这样的:

1. 事件冒泡问题。
2. 重复快速创建职位跨度的问题
   我的理论是，当鼠标悬停在位置标签上时使用 .empty() 销毁标签，并且标签没有足够快地重新添加回来，这将被视为另一个鼠标输入事件.

现在1.只需添加即可解决

if (e.delegateTarget != e.target)
        return;

到悬停事件处理程序。您可以注意到，问题发生的频率要低得多。

对于 2。

• 一个简单的解决方案是每次移动鼠标(和 B)时不再次创建标签。看看https://jsfiddle.net/IARI/w8y1y3vt/

  如果由于某种原因您想要或必须每次都在 B 内创建元素，这不会有帮助。但是，如果可以不重新创建它们，我建议您这样做，即使只是出于性能原因。

• 如果您可以选择简单地检查 B 是否存在，那么也可以解决问题，同时允许您重新创建位置标签 - https://jsfiddle.net/IARI/shzy6gtx/6/