本文介绍了如何去除下一个追加的鼠标离开?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

  $('厄尔尼诺')。在('的mouseenter',函数(E){  VAR工具栏= $('< D​​IV CLASS =工具栏><跨度>保留工具栏的元素< / SPAN>< / DIV>');    的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();
    });
});

非常感谢社会各界的答案!正是,的和


  1. 问题小提琴 - >

  2. 解决方案小提琴 - >


解决方案

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

  VAR工具栏= $('< D​​IV CLASS =工具栏><跨度>保留工具栏的元素< / SPAN>< / DIV>');
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:

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/

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

08-19 09:00