我的代码有问题;当我 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
问题在于,每次有 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/
这篇关于如何删除鼠标离开的下一个附加?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!