为什么当鼠标离开这个元素时我的函数会触发？答案

【问题标题】：Why does my function trigger when the mouse leaves this element?为什么当鼠标离开这个元素时我的函数会触发？
【发布时间】：2014-08-08 04:12:24
【问题描述】：

我有一个 div，当用户将鼠标悬停在它上面时，我想向它添加一个删除“按钮”。当用户将鼠标悬停在 div 上时，标签会插入到 div 的末尾。问题是当用户的鼠标离开元素时，标签又被插入了。我想在用户鼠标离开元素时移除标签。

这是div的原始状态：

<div class="tag" data-tag-id="123">hitman</div>

这是我将鼠标悬停在它上面时的样子：

<div class="tag" data-tag-id="123">hitman<div id="delete-123" style="float:right; padding-left:3px;">X</div></div>

当鼠标离开元素时：

<div class="tag" data-tag-id="123">hitman<div id="delete-123" style="float:right; padding-left:3px;">X</div><div id="delete-123" style="float:right; padding-left:3px;">X</div></div>

当鼠标离开时，“标签” div 应该会回到原来的状态。

这是我的 jQuery：

$('.tag').hover(function(){
    $(this).append('<div id="delete-'+$(this).data('tag-id')+'" style="float:right; padding-left:3px;">'+delete_markup+'</div>');
});
$('.tag').mouseleave(function(){
    $(this).remove('[id="delete-'+$(this).data('tag-id')+'"]');
});

【问题讨论】：

标签： jquery hover mouseleave

【解决方案1】：

hover() 是一个注册 mouseenter 和 mouseleave 处理程序的实用程序，因此可以这样做

$('.tag').hover(function(){
    $(this).append('<div id="delete-'+$(this).data('tag-id')+'" style="float:right; padding-left:3px;">'+delete_markup+'</div>');
}, function(){
    $(this).remove('[id="delete-'+$(this).data('tag-id')+'"]');
});

或

$('.tag').mouseenter(function(){
    $(this).append('<div id="delete-'+$(this).data('tag-id')+'" style="float:right; padding-left:3px;">'+delete_markup+'</div>');
});
$('.tag').mouseleave(function(){
    $(this).remove('[id="delete-'+$(this).data('tag-id')+'"]');
});

如果您只向hover(handlerInOut) 传递一个回调，那么它会同时在mouseenter 和mouseleave 上调用

演示：Fiddle

【讨论】：

【解决方案2】：

您正在使用 mouseleave 和 hover，只需将 hover 替换为 mouseenter 即可正常工作：

$('.tag').mouseenter(function(){
    $(this).append('<div id="delete-'+$(this).data('tag-id')+'" style="float:right; padding-left:3px;">'+delete_markup+'</div>');
});
$('.tag').mouseleave(function(){
    $(this).remove('[id="delete-'+$(this).data('tag-id')+'"]');
});

或者你可以在hover方法中使用mouseleave函数作为第二个函数。

【讨论】：

【解决方案3】：

hover = mouseenter+mouseleave;

在hover中第一个函数是鼠标进入，下一个函数是鼠标离开

$('.tag').hover(function () {
    $(this).append('<div id="delete-' + $(this).data('tag-id') + '" style="float:right; padding-left:3px;">' + delete_markup + '</div>');
}, function () {
    $(this).remove('[id="delete-' + $(this).data('tag-id') + '"]');

});

说明： 将两个处理程序绑定到匹配的元素，在鼠标指针进入和离开元素时执行。

【讨论】：