javascript - 防止 anchor 标签跳转

Question

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

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

参见 fiddle :

https://jsfiddle.net/ahu1kaqf/

问题是，由于其默认的 anchor 跳转行为，这种“黑客”具有将图像置于窗口最顶部的副作用。 所以我想要完成的是关闭或绕过只是跳跃行为。 因此，像“preventDefault”或“return false”这样的 JS 解决方案并不合适，因为它们会关闭完整的 anchor 行为。 我的想法是在单击之前读取 yScroll 位置并将其传递给另一个在页面跳转后触发的函数。通过在 anchor 标记上附加 onclick 事件，我发现该函数在实际跳转之前执行，并且我可以读取当前的滚动位置:

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

然后，在 anchor 事件完成后，我想将变量 scry 传递给另一个函数，该函数在 anchor 跳转后触发以撤消跳转:

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

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

fiddle 中的js代码位于脚本标签中，因为仅将函数放入js窗口中(当然没有脚本标签)会在控制台中显示错误，我不知道为什么......

抱歉，我真的是个初学者，谢谢大家的帮助!

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

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

无论哪种情况，您都可以使用e.preventDefault()停止正常的事件行为；

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