gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 14:49:16 26 4
gpt4 key购买 nike

我的代码有问题;当我 mouseenter 一个元素时,工具栏会 append 到该元素,但是当我从工具栏 mouseleave 到该元素时,工具栏会再次 append 。我怎样才能防止这种重新 append ?

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

  1. 问题 fiddle -> Fiddle
  2. 解决方案 -> 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com