我目前使用jQuery的<a>标签来启动像点击事件等事情。
例如<a href="#" class="someclass">Text</a>
但我讨厌“#”使页面跳转到页面顶部。我能做什么呢?
我目前使用jQuery的<a>标签来启动像点击事件等事情。
例如<a href="#" class="someclass">Text</a>
但我讨厌“#”使页面跳转到页面顶部。我能做什么呢?
在jQuery中,当你处理点击事件时,返回false以阻止链接响应通常的方式阻止默认操作,即访问href属性,从发生(根据PoweRoy的评论和Erik的回答):
$('a.someclass').click(function(e)
{
// Special stuff to do when this link is clicked...
// Cancel the default action
e.preventDefault();
});
您可以使用event.preventDefault()来避免这种情况。更多信息请点击:http://api.jquery.com/event.preventDefault/。
如果你想使用一个锚,你可以像其他答案一样使用http://api.jquery.com/event.preventDefault/。
您还可以使用任何其他元素,如span,并将单击事件附加到它。
$("span.clickable").click(function(){
alert('Yeah I was clicked');
});
只需使用<input type="button" />而不是<a>,并使用CSS样式它看起来像一个链接,如果你愿意。
按钮是专门用于单击的,它们不需要任何href属性。
最好的方法是使用onload动作来创建按钮,并通过javascript将其附加到需要的位置,因此禁用javascript后,它们根本不会显示,也不会使用户感到困惑。
当您使用href="#"时,您会得到大量指向相同位置的不同链接,当代理不支持JavaScript时,这将不起作用。
如果元素没有有意义的href值,那么它就不是真正的链接,那么为什么不使用其他元素呢?
正如Neothor所建议的那样,如果样式正确,span将作为一个可以点击的项目而显而易见。你甚至可以附加一个悬停事件,让元素在用户鼠标移动时“亮起”。
然而,话虽如此,你可能想要重新考虑你的网站的设计,这样它就可以在没有javascript的情况下运行,但在有javascript时可以通过javascript进行增强。
只使用
<a href="javascript:;" class="someclass">Text</a>
JQUERY
$('.someclass').click(function(e) { alert("action here"); }
你也可以在处理jquery后返回false。
Eg.
$(".clickableAnchor").live(
"click",
function(){
//your code
return false; //<- prevents redirect to href address
}
);
带有href="#"的链接几乎总是应该被按钮元素替换:
<button class="someclass">Text</button>
使用带有href="#"的链接也是一个可访问性问题,因为这些链接将对屏幕阅读器可见,屏幕阅读器将显示“链接-文本”,但如果用户单击它,它不会去任何地方。
为了防止页面跳转,你需要调用e.s stoppropagation ();在调用e.b epreventdefault()之后:
stopPropagation阻止事件沿着DOM树向上移动。更多信息请访问:https://api.jquery.com/event.stoppropagation/
如果你想要迁移到同一页面上的锚节,而不需要页面跳转,请使用:
只要用“#/”而不是“#” 如
<a href="#/home">Home</a>
<a href="#/about">About</a>
<a href="#/contact">contact</a> page will not jump up on click..
在#之后添加内容将页面的焦点设置为具有该ID的元素。最简单的解决方案是使用#/,即使你使用的是jQuery。但是如果你在jQuery中处理事件,event. preventdefault()是可行的方法。
#/技巧有效,但会向浏览器添加一个历史事件。因此,点击返回并不能像用户希望的那样工作。
美元(的身体)。(“点击”,“(href = " # "],函数(e) {e.preventDefault ()});是我去的方式,因为它适用于已经存在的内容,以及加载后添加到DOM的任何元素。
具体来说,我需要在.btn-group(Reference)中的引导下拉菜单中做到这一点,所以我做了:
美元(的身体)。('点击','。下拉菜单li a[href="#"]', function(e) {e.f preventdefault ()});
这样它是有针对性的,并且不会影响页面上的任何其他内容。
解决方案#1:(普通)
<a href="#!" class="someclass">Text</a>
解决方案#2:(需要javascript)
<a href="javascript:void(0);" class="someclass">Text</a>
解决方案#3:(需要jQuery)
<a href="#" class="someclass">Text</a>
<script>
$('a.someclass').click(function(e) {
e.preventDefault();
});
</script>
有4种类似的方法可以防止页面在不使用JavaScript的情况下跳转到顶部:
选项1:
<a href="#0">Link</a>
选项2:
<a href="#!">Link</a>
选项3:
<a href="#/">Link</a>
选项4(不推荐):
<a href="javascript:void(0);">Link</a>
但是如果你在jQuery中处理点击事件,最好使用event. preventdefault()。
<a href="#! "">链接</a>和<a href="#/">链接</a>不工作,如果一个人必须点击相同的输入不止一次。它只需要在多个输入上进行1次事件单击。
最好的方法仍然是使用<a href="#">Link</a>
然后,
event.preventDefault();
对我来说最简单的就是这样做。
<a href=“#” onclick=“return false;”>一些文本</a>
使用JS的原因是大多数现代网站都依赖于它。