Preventing javascript:void(0) links from showing link address on hover

Question

I have a javascript web application that contains lots of clickable elements that are currently all <a href='javascript:void(0)'> elements. Because there are so many links, as the user hovers over the page, javascript:void(0) flickers on and off in the lower left hand corner of browsers such as chrome and firefox which is annoying and ugly.

I know that I should leave these elements as links for accessibility and mobile friendliness. Is there a way to prevent this behavior in the browser? Alternatively I could convert all of the <a href='javascript:void(0)'> tags to <div> tags on the fly for non-touch browsers but that seems messy.

Regan

Answer 1

Those elements aren't hyperlinks in the first place, so replace them with <span> elements styled with cursor:pointer (and no href attribute).

Quinones

@BrianPeacock Yes, sure, it should work on every browser that supports CSS and the cursor property. – Quinones

Answer 2

If you are worried about browser compatibility for click events on <span></span> elements just use

<button type="button" class="yourclass" onclick="dothis();">This</button>

which might feel better in your thinking.

Spacing

Answer 3

I managed to remove it using a tampermonkey (greasemonkey like addon) based userscript in chrome.

I had a website with an image gallery that I modified to only show the fullscreen images at a specific size on a black background using ublock origin and Stylus (userstyles manager addon), that would show the javascript:void(0) link box on every click on an image (advancing the image to the next one in the gallery action) - which turned out to be pretty distracting after a short while.

The userscript just parses the webpage for a specific url and then replaces every instance of it with a different url. The new url uses http to register as an url, a bunch of /.. instances that help to reduce the url to the base url unsure if needed in the end, but it was the last thing that I tried, before it worked... :) and then only a single : and / after https and a specific "empty character" (blank unicode character), that now represents the entire url, and that prevents Chrome from even throwing the pop up. :)

I was amazed that it worked as well.. ;)

(Replace bestwebsiteintheworld.com with your url obviously. :) )

// ==UserScript==
// @name         removejavascriptvoid0
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://bestwebsiteintheworld.com/*
// @match        https://bestwebsiteintheworld.com/*
// @grant        none
// ==/UserScript==
 
var regex_list = [
    /^javascript\:void\(0\)/
];
 
var i, j;
 
for (i = 0; i < document.links.length; i++) {
    var link = document.links[i];
 
    for (j = 0; j < regex_list.length; j++) {
        var match = link.href.match(regex_list[j]);
 
        if (match != null) {
            link.href = 'http:/ㅤ/../..';
            break;
        }
    }
}

Villegas