【问题标题】:page scrolls down when clicking href=#SomeDivName单击 href=#SomeDivName 时页面向下滚动
【发布时间】:2012-02-10 21:34:49
【问题描述】:

我正在使用 Twitter 的 Bootstrap 顶部栏。

当我点击一些导航href时

href=#SomeDivName

比如当你在这个页面中按下导航时:

http://twitter.github.com/bootstrap/examples/fluid.html#contact

页面向下滚动一点。

我希望点击后会出现相关部分, 但我不希望页面向下滚动。

【问题讨论】:

  • haref=#SomeDiveName?你的意思是<a href="#SomeDiveName">?我不熟悉引导程序顶部栏,所以我可能会遗漏一些东西 - 但你的问题非常不清楚,没有真正的细节。请尝试提供更多信息。页面应该做什么?你试过什么?

标签: javascript jquery twitter-bootstrap


【解决方案1】:
$('a[href="#SomeDiveName"]').on('click', false);

当您单击带有设置为#SomeDiveName 的href 属性的锚标记时,这将返回false。这将阻止元素的默认行为,在这种情况下是滚动到 href 属性所引用的元素。

如果您有一组这些链接,那么我建议您添加一个类来识别它们,这样您就可以一次选择它们:

$('.stop-this-link').on('click', false);

这将阻止具有stop-this-link 类的所有元素在单击元素时的默认行为。按类选择也比按属性选择要快得多。按属性搜索时,必须检查 DOM 中的每个元素。

请注意,在 jQuery 事件处理程序中返回 false 与调用:event.preventDefault()event.stopPropagation() 相同。

有关这些功能的更多信息,请参见此处:

【讨论】:

  • 你能像这样将false 传递给.on 吗?不应该是.on('click', function(){return false;});吗?
  • 我不记得是谁了,但是大约一周前,SO 上的某个人向我展示了这一点。 function(){ return false' } 做什么?它返回false。好吧false 也返回false :)。如果您只想防止默认行为或事件冒泡,那么它如何简化代码有点酷。
  • function(){ return false' }function,而falseboolean。我猜 jQuery 足够聪明,可以弄清楚。
  • 但是function(){ return false' }的最终结果只是false。所以 jQuery 在任何一种情况下都只接收false
  • @Rocket 感谢您查找 jQuery 源代码。这是很好的信息。
【解决方案2】:

不要使用<a href="#target">,而是使用<a data-target="#target">并删除href属性

【讨论】:

  • 这对我没有用。想知道我是否需要做任何其他更改才能获得所需的功能
【解决方案3】:

Jasper 的回答是正确的,但是如果你以后绑定其他东西,你可能会觉得有些奇怪。我倾向于使用这个:

 $('.stop-this-link').on('click', function(e){ e.preventDefault() });

本质上是一样的,但重要的是它不会停止事件在 DOM 上的传播,代价是稍微冗长一些。

【讨论】:

    猜你喜欢
    • 2021-03-29
    • 2013-05-02
    • 2015-09-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-02-09
    • 2014-10-02
    • 1970-01-01
    相关资源
    最近更新 更多