如何删除鼠标离开的下一个附加?

2022-01-22 00:00:00 append jquery javascript

我的代码有问题；当我 mouseenter 一个元素时，工具栏被附加到这个元素，但是当我 mouseleave 从工具栏到元素时，工具栏又被附加了.我怎样才能防止这种重新附加?

I have a problem with my code; when I mouseenter an element, a toolbar is appended to this element, but when I mouseleave from the toolbar to the element, the toolbar is appended again. How can I prevent this re-appending?

$('.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

Big thanks to community for answers! exactly Jeremy Thille, Arun P Johny and Jivings

  1. 问题小提琴 -> 小提琴
  2. 解决方案小提琴 -> 小提琴

推荐答案

问题在于，每次有 mouseover 时，您都在创建事件处理程序.我已经将它们分开以使其更简单，这似乎已经修复了您的错误:

The trouble was that you were creating your event handlers each time there was a mouseover. I've split them up to make it simpler, and that seems to have fixed your bug:

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/

相关文章