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

Question

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

一切都按预期进行，但是我不知道在这里如何避免这种跨浏览器出现问题的正确方法，因为我在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();
});

Answer 1

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

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

对于第二种方法，您需要在点击处理程序中接受event参数，例如

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

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

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

Answer 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上的哈希更改，并使页面更改状态与哈希匹配。 这使得可收藏的应用程序成为可能。 （我不使用链接进行操作，这就是按钮的作用。）