如何将 onclick() 和 href 都附加到 <a> 元素，但一次只有一个工作答案

【问题标题】：How to attach both an onclick() and href to an <a> element, but only have one work at once如何将 onclick() 和 href 都附加到 <a> 元素，但一次只有一个工作
【发布时间】：2010-08-11 13:40:33
【问题描述】：

我有一个这样的元素：

<a class='link' href='/page1'>Page 1</a>

它有一个像这样附加的点击处理程序：

$('.link').click(function() { loadPage('page1'); });

点击链接后，新页面会加载。但是，有两种加载新页面的方法。一种是通过 AJAX，它可以确定哪些元素在页面之间发生了变化，并在不刷新的情况下重新加载部分，另一种是通过正常的 GET 请求加载。

我想将链接的 href 设置为正常加载的 URL，并设置 onlick() 来调用执行 AJAX 加载的 javascript 函数。但是，当我单击链接时，它们都会触发，导致页面完全刷新。

有没有办法阻止“href”在 Javascript 可用时生效？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

$('.link').click(function() { loadPage('page1'); return false });

或者

$('.link').click(function(e) { e.preventDefault(); loadPage('page1'); });

首先也是停止冒泡。其次，只防止...默认操作（*指向链接）

【讨论】：

@lonut 实际上你应该同时使用两者。如果 loadPage() 抛出错误，return false 可能不会触发
如果 loadPage() 抛出错误，你可能（这是一个假设）不希望它返回 false 触发。
uhm...我认为如果您对loadPage() 有错误，则链接将正常运行，无论您使用return false 还是preventDefault()（虽然不太确定，但我编写了防弹代码。大声笑：D）

【解决方案2】：

从您的 onclick 处理程序返回 false。

【讨论】：

呃，就是这么简单。谢谢！
我喜欢简单的答案！或者，您可以像其他人所说的那样使用 event.preventDefault() ，但返回 false （在 jQuery 中）将始终适用于您想要做的事情。如果您想详细了解差异，请参见此处：css-tricks.com/return-false-and-prevent-default

【解决方案3】：

你可以这样做

<a class='link' href='/page1'>Page 1</a>

$('.link').click(function(e) { 
e.preventDefault(); // Prevents the default action, i.e. following the href
loadPage('page1'); 
});

【讨论】：

【解决方案4】：

问题的简短描述（return false; 和 e.preventDefault(); 之间的差异）是 here。还可能需要考虑 e.stopPropagation();，尤其是由于 loadPage() 抛出错误的情况（如 Ben Rowe 所述）。

【讨论】：