jQuery超链接-href值？

Posted 2023-03-05

技术标签:

【中文标题】jQuery超链接-href值？【英文标题】：jQuery hyperlinks - href value? 【发布时间】：2010-10-17 18:49:15 【问题描述】：

在我的网站上，我使用 jQuery 来挂钩元素的事件，即超链接。由于这些超链接只对当前页面执行操作，并没有指向任何地方，所以我一直在：

<a href="#">My Link</a>

但是在某些浏览器中，这会导致页面从右滚动到顶部，这显然是不受欢迎的行为。我试过使用一个空白的 href 值，或者不包括一个，但是鼠标在悬停时不会变成手形光标。

我应该在里面放什么？

【问题讨论】：

只需使用 CSS 来获取悬停手形光标：cursor:pointer，您将在所有链接上获得手形，无论如何。伪链接将您带到哪里？你是滚动页面，还是去其他锚点？ 【参考方案1】：

$('a').click(function (event) 
 
     event.preventDefault(); 
     //here you can also do all sort of things 
);

然后你可以输入任何你想要的href，jQuery会触发preventDefault()方法，你不会被重定向到那个地方。

【讨论】：

.live() 可能是一个更好的方法。 .live() 是没用的，除非他通过 JS 将锚点放在 DOM 中（例如：AJAX 请求）为什么不只是return false;？ @David 那将不是 jQuery。我们不能这样！ @RoToRa?如何在事件上使用 jQuery 的 return false 行为来防止浏览器的默认操作和事件冒泡非 jQuery？【参考方案2】：

那些仅仅为了提供点击事件而存在，但实际上并不链接到其他内容的“锚点”实际上应该是 button 元素，因为它们才是真正的元素。

可以这样设置：

<button style="border:none; background:transparent; cursor: pointer;">Click me</button>

当然，点击事件可以附加到按钮上，而不必担心浏览器会跳到顶部，也无需添加无关的 javascript，例如 onclick="return false;"或 event.preventDefault() 。

【讨论】：

这应该被赞成。这可能是对 OP 最正确的答案。我同意。这是一个更好的主意。有趣的方法，但按钮不是链接。您不能右键单击按钮并选择“在新选项卡中打开”，这是一种常见的浏览习惯。应该包含一个有效的 href="" 应该被 javascript 覆盖（如果 js 处于活动状态）。如果我们只想要一个 Ajax 请求，那么这种方法是最好的。【参考方案3】：

你真的应该在里面放一个真正的链接。我不想听起来像个书呆子，但这是一个相当糟糕的习惯。 JQuery 和 Ajax 应该始终是您实现的最后一件事。如果您的链接无处可去，则说明您做的不对。

我不是在破坏你的蛋蛋，我的意思是出于好意。

【讨论】：

他真正应该做的是将链接指向将执行非javascript等效项的位置。然后覆盖 jQuery 中的操作。我在这方面很强大...... 我会非常小心，因为这种对话很快就会失控。我向你保证，我无意伤害或侮辱任何人。但是对于一个网站，我想不出在任何场合都有一个无处可去的链接是有意义的。我自己做过，谁没有做过，当代码中不相关部分的 javascript 错误导致一切崩溃时，我也被咬了一百次，或者，当页面加载缓慢但人们快速按下按钮时。所以现在，我不再这样做了。如果您没有真正的链接，就不可能优雅地失败，而且大多数搜索引擎可能永远不会抓取这些页面，尽管有些可以正确解析 JS，但不能保证。尽管不使用链接会有更好的方法，但作者可能会在没有机会重新设计的情况下维护或修改某些内容，在这种情况下，原始问题需要直接回答；当然，这个答案在开始项目时作为一般知识的最佳实践是很好的，所以它是这个线程中很好的支持材料。我确实认为它被高估了。【参考方案4】：

为什么要使用<a href>？我是这样解决的：

<span class='a'>fake link</span>

并设置样式：

.a text-decoration:underline; cursor:pointer;

您可以使用 jQuery 轻松访问它：

$(".a").click();

【讨论】：

我猜它被否决了，因为它感觉有点恶心。这种编码对你来说是不是有点“烟雾缭绕”的感觉？我喜欢使用带有 javascript 和 CSS 的合理标准的 html，在上面添加美感。一个链接就是一个链接——它不是一个“a”类跨度。 -1：当 HTML 中存在语义和功能等价物时，不要使用带有 CSS 的无语义 HTML 来伪造语义默认行为的视觉效果。庞大是对的。我也不同意反对票。如果使用跨度捕获事件是错误的，那么为什么 jQuery 在其官方文档中使用类似于此答案的解决方案？ docs.jquery.com/Events/bind#typedatafn。实际上，由于链接可以到达页面中的任何位置，我认为使用跨度比锚标记更好。如果他用p代替span，你会怎么想？我确实相信在这个例子中，这个类应该有一个更好的名字，而不是“假装锚”。这很糟糕，如果你有一个链接，它应该是一个标签。不是伪装成的跨度，无论如何这样做都是没有意义的。 @GmonC，jQuery 的官方文档经常是裤子。当然，您可以将 DOM 事件附加到任何元素，但这并不意味着当有更合适的语义元素已经具有所需的行为时，您应该替换通用/非语义元素。在这种情况下，链接 (<a>) 也不合适（如 gargantuan 所说）。 <button> 是最合适的元素（如 Talentmrjones 所说）。【参考方案5】：

将 return false 添加到单击处理程序的末尾，这可以防止发生尝试重定向页面的浏览器默认处理程序：

$('a').click(function() 
// do stuff
return false;
);

【讨论】：

感谢您指出，javascript: 解决方案都不起作用。哎呀！【参考方案6】：

使用 jquery，您可能只想获取带有 '#' 的那些

$('a[href=#]').click(function()return false;);

如果你使用最新的jquery（1.3.x），页面变化时无需重新绑定：

$('a[href=#]').live('click', function()return false;);

【讨论】：

【参考方案7】：

你应该使用<a href="javascript:void(0)" ></a> 而不是<a href="#" ></a>

【讨论】：

一个常见的错误是忘记<a href="javascript:void(0);" ></a>中的分号 href 中的 javascript 通常是一种不好的做法这对我来说是完美的解决方案。我处理的锚点是由第三方 html 生成器生成的，因此我无法更改为按钮或任何其他与锚点不同的方式，但我可以轻松替换 #【参考方案8】：

想知道为什么之前没有人在这里说过：为了防止 <a href="#"> 将文档位置滚动到顶部，只需使用 <a href="#/"> 代替。那只是 HTML，不需要 JQuery。使用event.preventDefault(); 实在是太过分了！

【讨论】：

【参考方案9】：

我知道这是旧的，但哇，有一个如此简单的解决方案。

完全删除“href”，只需添加一个执行以下操作的类：