如何去除下一个追加的鼠标离开？ [英] how remove next append on mouseleave?

问题描述

我有我的code的一个问题;当我的mouseenter 元素，工具栏附加到这个元素，但是当我鼠标离开从工具栏中的元素，工具栏再次追加。我怎样才能prevent此重新追加？

  $（'厄尔尼诺'）。在（'的mouseenter'，函数（E）{  VAR工具栏= $（'＆LT; D​​IV CLASS =工具栏＆GT;＆LT;跨度＆GT;保留工具栏的元素＆lt; / SPAN＆GT;＆LT; / DIV＆GT;'）;    的setTimeout（函数（）{
        toolbar.addClass（工具悬停'）;
    }，100）;    $（'身体'）prePEND（工具栏）。    toolbar.css（{
        左：$（'。EL'）偏移（）左，
        顶部：$（'。EL'）偏移（）顶 -  toolbar.height（） -  20
    }）;    $（'厄尔尼诺'）。在（'鼠标离开'，函数（E）{
        如果（$（e.relatedTarget）.closest（工具栏）。长度）回报;
        toolbar.removeClass（工具悬停'）;
        toolbar.remove（）;
    }）;    toolbar.on（'鼠标离开'，函数（E）{
        toolbar.remove（）;
    }）;
}）;
 

非常感谢社会各界的答案！正是杰里米Thille ，的阿伦P约翰尼和 Jivings

1. 问题小提琴 - > 小提琴


2. 解决方案小提琴 - > 小提琴

解决方案

麻烦的是，你在每次创建事件处理程序有一个鼠标悬停。我他们分手了，使其更简单，而且似乎已经解决您的错误：

  VAR工具栏= $（'＆LT; D​​IV CLASS =工具栏＆GT;＆LT;跨度＆GT;保留工具栏的元素＆lt; / SPAN＆GT;＆LT; / DIV＆GT;'）;
toolbar.on（'鼠标离开'，函数（E）{
    toolbar.remove（）;
}）;VAR输入=功能（E）{    的setTimeout（函数（）{
        toolbar.addClass（工具悬停'）;
    }，100）;    $（'身体'）prePEND（工具栏）。    toolbar.css（{
        左：$ el.offset（）离开。
        顶部：$ el.offset（）顶 -  toolbar.height（） -  20
    }）;
};VAR休假=功能（E）{
    如果（$（e.relatedTarget）.closest（工具栏）。长度）回报;
    toolbar.removeClass（工具悬停'）;
    toolbar.remove（）;
}变量$ =报$（'厄尔尼诺'）
    。对（'的mouseenter'，进入）
    。对（'鼠标离开，离开）;
 

的jsfiddle： http://jsfiddle.net/3r8wrumL/2/

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

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

1. Problem fiddle -> Fiddle
2. Solution fiddle -> Fiddle

解决方案

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/

这篇关于如何去除下一个追加的鼠标离开？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！