阻止锚标记跳转

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

我创建了一个简单的照片库，缩略图指向图像通过href。图像默认情况下不显示。通过点击一个缩略图，对应的图像显示得益于：target伪元素。通过这种方式，我可以绕过层次结构中更高级的HTML结构和地址元素的级联特性。

见琴：

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

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

然后，锚事件结束后，我想通过变量占卜到另一个功能，只是锚后跳触发撤消跳：

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

它并没有真正与click事件工作作为函数的实际跳转之前触发。

在小提琴的js代码是在脚本标记，因为不仅仅是使用功能到JS窗口（当然没有脚本标记的）显示在控制台中的错误，我不知道为什么......

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

来源

2017-08-04 kipo87

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()正常活动的行为;

对于第二部分，您可能只想在这种情况下设置全局。在全部功能之外设置一个全局功能，并通过点击进行更改。你可能会变得更复杂一些，并且承诺等等，但是，老实说，设置一个全局值就很容易。尽量避免它们是很好的，但它们可以是简单有用的解决方案，这取决于所讨论的应用程序的整体复杂性。

来源

2017-08-04 22:51:28 Leeish

谢谢你的快速回答！ – kipo87

感谢您的快速回答！但由于preventDefault（），目标伪选择器不再工作。通过点击一个拇指，相应的图像不会再显示出来... – kipo87

好吧，明白了。我必须添加 document.getElementById（“img <对应数字>”）。style.display =“initial”; 在修复这个功能。在飞行中学习.... – kipo87

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

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

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

然后在你的JS代码，你可以这样做：

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

来源

2017-08-04 22:52:26 Paul

阻止锚标记跳转

回答

相关问题