Disable hyperlinks but keep functionality of this javascript?

Question

I'm creating an audioplayer with a playlist and I use javascript to recognize links as songs and put them in a playlist.

<a href="media/example/01.wav"></a>
<a href="media/example/01.wav"></a>
<a href="media/example/01.wav"></a>

This is the script I use

var audio;
var playlist;
var tracks;
var current;
init();
function init(){
    current = 0;
    audio = $('.player');
    playlist = $('.album_tracks_container');
    tracks = playlist.find('li a');
    len = tracks.length;
    var currentPlaylist;
    playlist.find('a').click(function(e){
        e.preventDefault();
        link = $(this);
        current = link.parent().index();
        currentPlaylist = link.closest('.album_tracks_container'); // <---
        run(link, audio[0]);
        $('.audioplayer').removeClass('audioplayer-stopped');
        $('.audioplayer').addClass('audioplayer-playing');
    });
    audio[0].addEventListener('ended',function(e){
        current++;
        if(current == len){
            current = 0;
            link = currentPlaylist.find('a')[0];
        }else{
            link = currentPlaylist.find('a')[current];   
        }
        run($(link),audio[0]);
        $('.audioplayer').removeClass('audioplayer-stopped');
        $('.audioplayer').addClass('audioplayer-playing');
    });
}
function run(link, player){
    $('.album_tracks_container').find('.album_tracks_light, .album_tracks_dark').removeClass('album_tracks_active');
    player.src = link.attr('href');
    par = link.parent();
    par.addClass('album_tracks_active').siblings().removeClass('album_tracks_active');
    $('.album_tracks_container').find('.album_tracks_light, .album_tracks_dark').find('.album_tracks_number, .album_tracks_text').removeClass('album_tracks_number-text_active');
    par.find('.album_tracks_number, .album_tracks_text').addClass('album_tracks_number-text_active');
    audio[0].load();
    audio[0].play();
}

Now, my problem is that my audioplayer is at the bottom of the page, and as you hover the links, the chrome hyperlink popup will partially cover it. Is it possible to disable the hyperlinks but keep the functionality of selecting tracks through links href?

Alternatively, is it possible to turn the links into a span or something and have the javascript recognize the text in it instead?

Or as a last option, can I simply hide Chromes (and others browsers) hyperlink popup display?

Answer 1

The easiest way is to remove the href attribute, try to use "data-file" instead. Also You'll need to change the folowing line

player.src = link.attr('href');

to

player.src = link.data().file;

Answer 2

You can turn <span> element into a clickable element (with behavior similar to a link).

Here an example:

$('span.link').click(function(e){
    alert('Hello!');
   // put the action of your <a> here
});

http://jsfiddle.net/bruno2c/c2KYm/4/