Why does an empty URL hash lead to page jumps on JavaScript events?

本文共计573个文字，预计阅读时间需要3分钟。

我有相册，带上下翻页按钮。若我的JavaScript方法其中一个坏了，相册翻页功能将无法使用。

Ihaveagalleryofphotoswithanextandpreviousbutton.Ifoneofmyjavascriptmethodsisbroke

I have a gallery of photos with a next and previous button. If one of my Javascript methods is broken for one reason or another when one of the buttons is clicked it will add a hash to the url i.e. www.google.com# . I know the hash can be given a div id to jump to that part of the page but when it's blank it jumps around my page a few times and I'm not sure what it's targeting. I thought of attempting to remove the hash from the url but then I'd have to ensure that on every action and that seems like bad practice. I would prefer if the hash just made no difference to the actions on the page.

我有一个带有下一个和上一个按钮的照片库。如果我的一个Javascript方法由于某种原因因单击其中一个按钮而被破坏，则会在网址中添加一个哈希值，即www.google.com＃。我知道哈希可以被赋予一个div id来跳转到页面的那一部分但是当它是空白时它跳过我的页面几次而且我不确定它的目标是什么。我想过尝试从网址中删除哈希，但后来我必须确保在每个操作上，这似乎是不好的做法。如果哈希对页面上的操作没有任何影响，我更愿意。

3 个解决方案

#1

2

Don't use href="#", it is improper.

不要使用href =“＃”，这是不合适的。

Instead, use href="Javascript:;" or a variant thereof (personally I use Javascript:void(null);) This explicitly states that the link does not go to another location, but is handled by Javascript.

相反，使用href =“Javascript：;”或其变体（我个人使用Javascript：void（null）;）这明确指出链接不会转到另一个位置，而是由Javascript处理。

#2

2

I guess Next And Prev button has like markup. In this case you can add event listener to those links with jquery

我猜Next和Prev按钮有之类的标记。在这种情况下，您可以使用jquery向这些链接添加事件侦听器

$('#prev, #next').on({ 'click': function(e) { e.preventDefault(); }})

and avoid changing location by browser. Or in pure Javascript:

并避免通过浏览器更改位置。或者在纯Javascript中：

document.querySelectorAll('#prev, #next').addEventListener('click', function(e) { e.preventDefault();},false)//Note: this code is not cross-browser

#3

0

Don't use an anchor tag when you don't want to perform a navigation function. Use button

当您不想执行导航功能时，请勿使用锚标记。使用按钮