javascript - 下载后jquery触发点击

Question

当用户收听或下载我的歌曲并为Goole Analytics生成事件时，我尝试使用JQuery。

为了与

$("audio").bind("play", function( event ){
    ga('send', 'event', 'Audio', 'Play', event.target.id );
});
$("audio").bind("ended", function( event ){
    ga('send', 'event', 'Audio', 'Ended', event.target.id );
});
$("a:contains('Download')").click(function( event ){
    ga('send', 'event', 'Audio', 'Download', event.target.id );
});

捕获所有“播放”和“结束”事件，直到用户首次单击“下载”链接。第一个下载事件已正确触发，但是从现在开始，不再检测到任何事件，即“播放”或“未结束”。
我也尝试过：

$( document ).on("click" , "a:contains('Download')" , function( event ){
    ga('send', 'event', 'Audio', 'Download', event.target.id );
});

结果相似。

Answer 1

我找到了可能的解决方案。

最初的问题是我想向访问者提供一个下载我的歌曲的按钮，从而打开了“另存为”消息框。我的原始代码是使用HTML下载属性：

<a href="/mp3/Mysong.mp3" downlaod >Download</a>

此解决方案有两个问题：


并非所有浏览器都支持
当出现消息框时，jQuery似乎停止监听页面中的事件，因此我再也无法（通过Google Analytics（分析））跟踪用户播放我的歌曲的次数。


我的解决方案是以下一种。

HTML：定义与下载事件关联的类（TrackDownload）

<a class="TrackDownload" href="/mp3/Mysong.mp3">Download</a>

JS：与类TrackDownload关联，以打开新框架，这样jQuery继续监视主页，而在另一页中下载了歌曲

$( document ).ready(function() {
    $("a.TrackDownload").click(function( event ){
        ga('send', 'event', 'Audio', 'Download', event.target.id );
    });
    $("a.TrackDownload").attr({target: '_blank',
        download: $(this).prop('href'),
        href : $(this).prop('href')
    });
    $("audio").bind("play", function( event ){
        ga('send', 'event', 'Audio', 'Play', event.target.id );
    });
});

.htaccess：在服务器级别，定义mp3文件不必播放而是下载的事实。这种方式不会打开新框架，而是在“另存为”消息框中进行转换。

<FilesMatch "\.mp3$">
<IfModule mod_headers.c>
Header set Content-Disposition "attachment"
Header set Content-Type "application/octet-stream"
</IfModule>
</FilesMatch>

也许还有更多优雅的解决方案，但这是可行的。