javascript - 如何删除mouseleave上的下一个追加？

我的代码有问题；当我对元素进行mouseenter时，工具栏将追加到该元素，但是当我对工具栏进行mouseleave时，该工具栏将再次追加。如何防止重新添加？

$('.el').on('mouseenter', function(e){

  var toolbar = $('<div class="toolbar"><span>leave toolbar to element</span></div>');

    setTimeout(function(){
        toolbar.addClass('widget-over');
    },100);

    $('body').prepend(toolbar);

    toolbar.css({
        left:$('.el').offset().left,
        top:$('.el').offset().top - toolbar.height() - 20
    });

    $('.el').on('mouseleave',function(e){
        if ($(e.relatedTarget).closest(toolbar).length) return;
        toolbar.removeClass('widget-over');
        toolbar.remove();
    });

    toolbar.on('mouseleave',function(e){
        toolbar.remove();
    });
});

非常感谢社区的回答!分别是Jeremy Thille，Arun P Johny和Jivings

问题小提琴-> Fiddle

解决方案提琴-> Fiddle

最佳答案

麻烦的是，每次有一个mouseover时，您都在创建事件处理程序。我将它们分开以使其更简单，这似乎已解决了您的错误:

var toolbar = $('<div class="toolbar"><span>leave toolbar to element</span></div>');
toolbar.on('mouseleave',function(e){
    toolbar.remove();
});

var enter = function(e) {

    setTimeout(function(){
        toolbar.addClass('widget-over');
    },100);

    $('body').prepend(toolbar);

    toolbar.css({
        left: $el.offset().left,
        top: $el.offset().top - toolbar.height() - 20
    });
};

var leave = function(e){
    if ($(e.relatedTarget).closest(toolbar).length) return;
    toolbar.removeClass('widget-over');
    toolbar.remove();
}

var $el = $('.el')
    .on('mouseenter', enter)
    .on('mouseleave', leave);

JSfiddle:http://jsfiddle.net/3r8wrumL/2/

关于javascript - 如何删除mouseleave上的下一个追加？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28431036/