HTML / jQuery：如何正确调用锚标记上的函数（跨浏览器）答案

【问题标题】：HTML / jQuery: How to properly call a function on an anchor tag (cross-browser)HTML / jQuery：如何正确调用锚标记上的函数（跨浏览器）
【发布时间】：2014-08-25 07:25:57
【问题描述】：

我有一个页面，其中包含一些用于调用函数的链接（锚标记）。

一切都按预期工作，但我想知道在这里避免这种跨浏览器问题的正确方法是什么，因为我在 Google 上看到了不同的方法。

我使用jQuery而不是内联javascript来调用函数，因为这样我的所有函数都以相同的方式调用+我想通过使用一个类从不同的元素调用相同的函数。

谁能告诉我以下是否是避免跨浏览器（IE8、IE9、FF、Chrome）问题的正确方法？

另外，我是否必须在我的函数中添加以下内容之一或类似内容？

return false;

或

e.preventDefault();

我的 HTML：

<a href="javascript:void(0)" class="deco-min showSiteMap">Site Map</a>

我的 jQuery：

$('.showSiteMap').on('click', function() {
    showSiteMap();
});

【问题讨论】：

标签： javascript jquery void preventdefault

【解决方案1】：

由于您使用的是 jQuery，因此跨浏览器问题由库本身处理，因此您不必担心。所以这两种方法都可以正常工作。

第一种方法将阻止默认操作以及停止事件传播..，仅使用它是您想要的。

要使第二种方法起作用，您需要在点击处理程序中接受事件参数，例如

$('.showSiteMap').on('click', function(e) {
    showSiteMap();
    e.preventDefault();
});

在这两种方法中都不需要像这样的 href 属性，你可以使用

<a href="#" class="deco-min showSiteMap">Site Map</a>

【讨论】：

非常感谢 - 这是完美的！您是否会建议/喜欢这些方法中的任何一种？

【解决方案2】：

对于不是真正链接的链接，您在href 中输入的内容主要是样式问题。我喜欢给他们建议他们将要做什么的哈希片段（href="#sitemap"），因为用户有时确实会查看状态区域的链接以了解它将做什么。*但您可以使用href="#" ，href="javascript:void(0)"，href="javascript:;"，随便什么。

在链接的 jQuery 处理程序中，如果您使用哈希片段，如果您不希望将哈希添加到 URL（和页面），则可能需要阻止链接的默认操作（跟随链接）可能滚动到具有匹配 id 的元素（如果有）。您可以使用e.preventDefault() 或使用return false; 来做到这一点。 return false; 做了两件事：e.preventDefault(); 和e.stopPropagation();（防止事件冒泡到链接的祖先元素）。因此，请使用对您的应用有意义的任何一个。

所以：

$('.showSiteMap').on('click', function() {
    showSiteMap();
    return false;
});

...如果你想阻止默认并停止传播。

或者：

$('.showSiteMap').on('click', function(e) {
    e.preventDefault();
    showSiteMap();
});

...如果您只想阻止默认值（按照链接）但不停止传播。

如果您的href 是上述javascript: 示例中的任何一个，则您没有阻止默认设置，因为默认设置是无操作的。

* 但我通常使用散列片段。我不是处理对链接的点击，而是处理 URL 上的哈希更改，并让页面更改状态以匹配哈希。这使得一个可书签的应用程序。（我不使用链接来执行操作，这就是按钮的用途。）

【讨论】：

谢谢 - 这也很有帮助！