JQuery Hide() 行为

Question

我正在使用 Firefox 和 JQuery:

以下代码会短暂隐藏内容，但随后内容会重新出现:

$("#calorielink").click(function() {
                $("#A").hide();
                $("#B").hide();
            });

以下代码正确隐藏了内容:

$("#calorielink").click(function() {
                $("#A").hide();
                $("#B").hide();
                return false;
            });

为什么return语句会起作用？

Answer 1

return false 在事件处理程序中为您执行以下操作:

• 阻止是事件的默认操作。假设 #calorieLink 是 a，这意味着用户不会被定向到新页面。
• 停止事件的传播。该事件不会在 DOM 中冒泡。换句话说，如果您将事件处理程序附加到该元素的“上游”元素，它们将不会收到该事件的通知。
• 立即从回调函数返回。

通常，您只需要第一个(您只需要阻止默认操作):

$("#calorielink").click(function(event) {
    event.preventDefault(); // Prevent the default action from occurring.
    $("#A").hide();
    $("#B").hide();
});

我通常建议不要在事件处理程序中使用return false。考虑一下您希望在事件处理程序中发生什么，即使您确实需要 return false 完成的两件事，这样写也更具表现力:

event.preventDefault();
event.stopPropagation();

Here's很好地了解了 return false 实际执行的操作。

不包含 return false 或停止事件默认操作 (event.preventDefault()) 将导致您的代码运行并且事件的默认行为也会发生。这可能就是为什么您会看到代码运行得很快，然后效果就消失了。