【问题标题】:e.preventDefault() to prevent anchor jumping to the ID not working on anonymous functione.preventDefault() 防止锚点跳转到不工作匿名函数的 ID
【发布时间】:2019-02-08 03:02:38
【问题描述】:

我有以下 jQuery/JS 在单击元素时触发一些东西:

$(tabs).click(function(e) {
    tabs.removeClass('active');
    $(this).addClass('active');

    $(tabIDs).removeClass('js_tab_area_show');
    $($(this).attr('href')).addClass('js_tab_area_show');

    e.preventDefault();
    alert('worked');
});

tabs 这里已经在函数之前初始化并选择了我想要定位的元素。上面所有的东西都已经开始工作了。但是,我现在想禁用锚元素(在这种情况下为 tabs)滚动到 ID 包含在我的锚的 href 属性中的元素。我试着环顾四周,许多人建议preventDefault() 防止滚动。但是,它对我不起作用。我主要看到的唯一区别是它们有一个命名函数,专门用于处理从点击函数中调用的点击事件。另一方面,我的做了上述。 alert('worked') 确实触发了,表明代码执行到最后。我在这里做错了什么?

【问题讨论】:

  • 我没有看到您的示例中控制滚动的代码。
  • event.preventDefault 不用于在此处停止该功能。如果你想在alert('worker')之前停火,应该是return false
  • @Kai 我并不是想停止该函数的执行。我希望它防止a 滚动到div,它具有与ahref 中包含的相同ID。在这里查看更多信息,这就是我发现的“建议”的意思:stackoverflow.com/questions/3659072/…
  • @WealthyPlayer 所以请在最后尝试return false:D。
  • @Kai 我把return false; 放在alert('worked') 之后,它仍然滚动到div 元素。

标签: javascript jquery preventdefault


【解决方案1】:

href修改

不要让您的 JavaScript/jQuery 或 CSS 过于复杂,请执行以下操作。

<a href="#/">I DON't JUMP</a>

                   ☝ 只需添加一个正斜杠:/

如果您有大量链接并且没有可用的服务器端实用程序,请参阅演示 2。它有一个简单的 JavaScript 链接收集器。


演示1

h1,
h2 {
  text-align: center
}

h2 {
  font-size: 64px
}

a {
  display: inline-block;
  height: 30px;
  font-size: 24px;
  width: 40%;
  margin: 400px 0;
}

a:first-of-type {
  color: red;
  text-align: right;
}

a:last-of-type {
  color: blue;
  text-align: left;
}
<main>
  <h1>Scroll Down</h1>
  <h2>⇩</h2>
  <a href="#">Click me.<br>I JUMP.</a>
  <a href="#/">Click me.<br>I DO NOT JUMP.</a>
</main>

演示 2

Array.from(document.querySelectorAll('a')).forEach(lnx => {
  if (lnx.getAttribute('href') === '#') lnx.setAttribute('href', "#/");
});
h1,
h2 {
  text-align: center
}

h2 {
  font-size: 64px
}

main {
  margin: 400px auto;
}

a:nth-of-type(odd) {
  background: #000;
  color: #fff;
}

a:nth-of-type(even) {
  color: #000;
}
<h1>Scroll Down</h1>
<h2>⇩</h2>
<main>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
</main>

【讨论】:

  • 如果是这种情况,我认为使用a 毫无意义。诚然,我可能不应该使用a,因为我正在实施tab;像div 这样的任何其他元素在我的处理程序中应用不同的概念时也可以正常工作。所以还有更多问题:1. 我应该将我的a 更改为div,这意味着调整我的JS 概念吗? ---- 2. 如果我仍然想使用上面的代码(a 包含指向目标 elem 的 href)怎么办,因为我的 JS 代码很大程度上依赖于 href目标as 有吗?是否可以通过 JS/jQuery 禁用滚动/跳转?
  • 1.不,除非你有空闲时间。 2. 取决于:target 选择器使用的hrefs,如果是这样我会改变它,因为它不是很灵活也不是那么有用。 3. 是的,可以禁用滚动...您是否尝试将e.preventDefault(); 放在函数的第一行。我总是这样做,e.preventDefault(); 从来没有让我失望过。
  • 1.好的谢谢你。 2. 不,他们不是。我只是运行for 循环来获取as 的所有href 并将它们保存在上面的tabIDs 中,我将用于下一个函数。 3. 我做到了,这是这里的主要问题。在上面的代码中,我已经使用了e.preventDefault();,请看一下,尽管在代码的最后一行的第 3 行。不过应该没关系。我也尝试了return false;,正如 cmets 对我上面的问题所建议的那样。也没有用。
  • “我已经用过 e.preventDefault();,请看一下,虽然在代码的最后 3 行。不过应该没关系。”顺序在编程的许多方面都很重要。在处理事件时,事件触发捕获传播等有一个顺序。我会测试你的代码,但我也需要 HTML。
  • 您好,我刚刚将e.preventDefault() 作为我的click 处理函数中要执行的第一行。仍然没有工作。当我有代码笔时,我会用它来标记你。
猜你喜欢
  • 2012-10-06
  • 1970-01-01
  • 1970-01-01
  • 2018-02-27
  • 2012-01-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多