禁用超链接但保留此 javascript 的功能？答案

【问题标题】：Disable hyperlinks but keep functionality of this javascript?禁用超链接但保留此 javascript 的功能？
【发布时间】：2014-02-02 13:58:32
【问题描述】：

我正在创建一个带有播放列表的音频播放器，我使用 javascript 将链接识别为歌曲并将它们放入播放列表中。

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

这是我使用的脚本

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();
}

现在，我的问题是我的音频播放器位于页面底部，当您将链接悬停时，chrome 超链接弹出窗口将部分覆盖它。是否可以禁用超链接但保留通过链接href选择曲目的功能？

或者，是否可以将链接转换为跨度或其他内容，并让 javascript 识别其中的文本？

或者作为最后一个选项，我可以简单地隐藏 Chrome（和其他浏览器）超链接弹出显示吗？

【问题讨论】：

您可以将 span 与 html5 数据属性结合使用，例如及以后的：$('span')。 data('href') 因为 jQuery 数据也读取 html5 数据属性.. 你也可以使用 .attr('data-href') 等来读取它。
我使用了这个并在脚本 playlist.find('a' ).click(function(e){ player.src = link.attr('href'); 到这个播放列表.find('.span-link').click(function(e){ player.src = link.attr ('data'); 感谢 Goran.it 和 mplungjan 的帮助！

标签： javascript jquery html html5-audio playlist

【解决方案1】：

最简单的方法是删除 href 属性，尝试使用“data-file”代替。另外，您需要更改以下行

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

到

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

【讨论】：

【解决方案2】：

您可以将<span> 元素转换为可点击元素（行为类似于链接）。

这里是一个例子：

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

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

【讨论】：