防止锚标签跳转

Question

这是我第一次 post SO，我已经使用了很长时间，总是通过搜索找到解决方案。现在我开始更深入地研究编程 - 现在正在学习 Java 脚本 - 但我找不到适合我的初学者问题的确切答案：

我创建了一个简单的照片库，其中缩略图通过 href 指向图像。默认情况下不显示图像。通过单击缩略图，由于 :target 伪元素，相应的图像会出现。这样我就可以绕过我的 HTML 结构的级联特性并在层次结构中处理更高的元素。

见fiddle:

问题是，由于其默认的锚点跳转行为，此 "hack" 具有将图像放在 window 最顶部的副作用。所以我想要完成的是关闭或绕过 just 跳转行为。因此，像 "preventDefault" 或 "return false" 这样的 JS 解决方案是不合适的，因为它们关闭了完整的锚点行为。我的想法是在点击之前读取 yScroll 位置并将其传递给另一个在页面跳转之后触发的函数。通过在锚标记上附加一个 onclick 事件，我发现该函数在实际跳转之前执行，我可以读取当前的 scrollY 位置：

function posY(){
  console.log(window.scrollY);
  scry = window.scrollY;
}

然后，在锚点事件结束后，我想将变量 scry 传递给另一个函数，该函数在锚点跳转后立即触发以撤消跳转：

function undoJump(){
  window.scrollTo(0, scry);
}

它并不真正适用于点击事件，因为该函数在实际跳转之前触发。

fiddle中的js代码在脚本标签中，因为只将函数放入js window（当然没有脚本标签）在控制台中显示错误，我没有知道为什么...

不好意思，我真的是初学者，谢谢大家的帮助！

Answer 1

https://jsfiddle.net/ahu1kaqf/1/

var classname = document.getElementsByClassName("thumb");
for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener("click", posY);
}
function posY(e){
  e.preventDefault();
  console.log(window.scrollY);
}

删除 onclick 因为这不是最好的方法。添加 class 到链接或使用基于父 class 的 querySelectorAll。这里的好处是，您不必记住添加 class 或 onclick。它需要处理的代码更少，更易于管理。

https://jsfiddle.net/ahu1kaqf/2/

无论哪种情况，您都可以使用 e.preventDefault();

停止正常的事件行为

对于第二部分，您可能只想在本例中设置一个全局变量。在所有功能之外设置一个全局并在单击时更改它。您可能会使用对象、承诺等变得更加复杂，但老实说，设置全局值同样容易。尽量避免使用它们很好，但它们可能是简单有用的解决方案，具体取决于相关应用程序的整体复杂性。

Answer 2

是的，您需要阻止默认操作（这是一个导航操作）。

在现代浏览器中，这意味着您可以这样做（注意我将全局事件对象作为参数传递）：

<a href="#img1" onclick="posY(event)"><div class="thumb">thumb1</div></a>

然后在你的js代码中你可以这样做：

function posY(e){
      e.preventDefault()
      console.log(window.scrollY);
  }

防止锚标签跳转

Prevent anchor tag to jump

javascript

anchor