防止锚标签跳转答案

【问题标题】：Prevent anchor tag to jump防止锚标签跳转
【发布时间】：2017-08-04 22:36:59
【问题描述】：

这是我在 SO 上的第一篇文章，我使用它已经有一段时间了，总是通过搜索找到解决方案。现在我开始更深入地研究编程——现在正在学习 Java Script——我找不到我的初学者问题的确切答案：

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

见小提琴：

问题是，由于其默认的锚点跳转行为，这种“hack”具有将图像置于窗口最顶部的副作用。所以我想要完成的是关闭或绕过 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代码是在script标签中，因为只是把函数放到js窗口中（当然没有script标签）在控制台显示错误，不知道为什么...

对不起，我真的是初学者，谢谢大家的帮助！

【问题讨论】：

标签： javascript anchor

【解决方案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，因为这不是最好的方法。将类添加到链接或使用基于父类的querySelectorAll。这里的好处是，您不必记住添加类或onclick。处理的代码更少，更易于管理。

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

在任何一种情况下，您都可以使用e.preventDefault() 停止正常的事件行为；

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

【讨论】：

感谢您的快速回答！
感谢您的快速回答！但是由于 preventDefault() 目标伪选择器不再起作用。通过单击拇指，相应的图像不再显示...
好的，知道了。我必须添加 document.getElementById("img").style.display = "initial";在修复该问题的功能中。即时学习....

【解决方案2】：

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

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

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

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

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

【讨论】：