Question

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

我创建了一个简单的照片库，缩略图通过href指向图像。默认情况下不显示图像。通过单击缩略图，可以通过：target伪元素显示相应的图像。通过这种方式，我可以绕过HTML结构的级联性质，并解决层次结构中较高的元素。

见小提琴：

问题是，这个＆＃34; hack＆＃34;由于其默认的锚跳跃行为，将图像置于窗口的最顶部会产生副作用。所以我想要完成的是关闭或绕过只是跳转行为。因此，JS的解决方案就像＆＃34; preventDefault＆＃34;或＆＃34;返回false＆＃34;不适合，因为他们关闭完整的锚定行为。我的想法是在点击之前读取yScroll位置并将其传递给另一个在页面跳转后触发的函数。通过在锚标记上附加onclick事件，我发现函数在实际跳转之前执行，我可以读取当前的scrollY位置：

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

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

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

当实际跳转之前函数触发时，它并不适用于click事件。

小提琴中的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();

停止正常的事件行为

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

Answer 2

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

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

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

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

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

防止锚标签跳跃

2 个答案: