jQuery悬停事件在鼠标悬停时触发两次答案

【问题标题】：jQuery hover event firing twice on mouse overjQuery悬停事件在鼠标悬停时触发两次
【发布时间】：2010-01-23 21:18:49
【问题描述】：

我正在尝试使用此 jQuery 在悬停时临时更改 div 的内容：

$(document).ready( function() {
    var $ratingHtml = '';
    $('.userRating').hover(
        function() {
            $ratingHtml = $(this).html();
            alert($ratingHtml);
            $(this).html( 'Log in to rate' );
        },
        function() {
            alert($ratingHtml);
            $(this).html( $ratingHtml );            
        }
    );
});

但在悬停时，警报会出现两次 - 第一次是针对原始 HTML 内容，然后是字符串“登录以进行评分”。似乎发生了第二个鼠标悬停事件。我该如何解决这个问题？

【问题讨论】：

如果您删除警报，它仍然会这样做吗？当您关闭警报时，您可能会收到一个新事件，因为当警报弹出时元素可能会失去焦点。
@tvanfosson：不，警报只是为了调试目的而添加的，没有它们也会发生同样的事情。
您是否尝试过更改文本而不是 html？我看到添加 DIV 可以，但我想知道是否只使用 .text() 也可以。

标签： jquery hover

【解决方案1】：

我决定采用不同的解决方案 - 在叠加层中添加文本：

$('.userRating').hover(
    function() {
        $('<div class="loginMsg">Log in to rate</div>').appendTo('.userRating');
    },
    function() {
        $('.loginMsg').remove();
    }
);

在 CSS 中使用适当的样式。

【讨论】：

【解决方案2】：

我认为这是因为事件传播。请参阅以下链接了解如何避免它：

How to stop event propagation with inline onclick attribute?

http://snipplr.com/view/2810/stop-event-propagation-stop-an-event-from-bubbling-up/

【讨论】：

嗯...没有“jQuery”方法可以做到这一点吗？

【解决方案3】：

这个问题已经被问及回答here@stackoverflow.com....

你可以使用这个 jQuery plugin...它将帮助你进行悬停...

【讨论】：