我的代码有问题;当我mouseenter
一个元素,一个工具栏被附加到这个元素上,但是当我mouseleave
从工具栏到元素,工具栏会再次附加。我怎样才能防止这种重新附加?
$('.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();
});
});
非常感谢社区的解答!确切地杰里米·蒂尔 https://stackoverflow.com/users/1021703/jeremy-thille, 阿伦·P·约翰尼 https://stackoverflow.com/users/114251/arun-p-johny and Jivings https://stackoverflow.com/users/334274/jivings
- 问题小提琴->Fiddle http://jsfiddle.net/3r8wrumL/
- 解决方案小提琴->Fiddle http://jsfiddle.net/3r8wrumL/2/
问题在于,每次出现事件时,您都要创建事件处理程序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);
JS小提琴:http://jsfiddle.net/3r8wrumL/2/ http://jsfiddle.net/3r8wrumL/2/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)