Return false onclick anchor not fully working

Question

I have a lightbox overlay, and I use below to unscrew the browser window to bind href to "#". It works for me, so it does not scroll the window on the initial click, but when you close the lightbox, the browser scrolls at the top overlays and # is added to the URL.

<a href="#" onclick="somefunction(); return false;">... 

or even that ...

 <a href="javascript:void(0)" onclick="somefunction(); return false;">... 

A link to a clickable image that the onclick function calls a pop-up window.

Andy is thinking how to prevent the browser from scrolling upstairs after exiting the overlay?

Answer 1

I would suggest not using the anchor tag at all. If you do not want the HREF value, then this is really not a link to another page, so it’s probably not really a link. If the site should be accessible without javascript, you need to think about it also and come up with a solution that will allow you to get the true href value, which will refer to the actual content.

However, if you are ok with the fact that this application requires JS, you can do this:

 <a href="javascript:;" onclick="somefunction(); return false;"> 

But, again, this is really what you click to update the interface, and not go somewhere, so I just make it a DIV, give it an onclick event and do it. But be sure to give the tabindex div so that it can be accessed by the keyboard.

Answer 2

You should avoid the # href and javascript: pseudo-protocols.

The link should always point to a valid resource.

If you cannot use a more appropriate element, such as a button (as your example suggested), I would use event.preventDefault() to override the default behavior.