jQuery下载后重新点击

当用户收听或下载我的歌曲并为Goole Analytics生成事件时，我试图抓住JQuery。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); 
});

有类似的结果。

来源

2014-10-18 Luca

我可以补充一点，它似乎与“另存为”对话框的外观有关。我注意到，在调试模式下，如果我用'.mouseover'替换'.click'，事件总是被检测到，但“另存为”对话框不会出现。 – Luca 2014-10-18 01:56:52

你能告诉我们一个代码示例吗？我没有看到类似html/js（demo：http://codepen.io/anon/pen/CLwio）的通用设置发生这种情况，并且没有在我面前看到它进行调试，很难猜到问题是。 – 2014-10-18 04:29:44

这是代码。 HTML： ''' '' <脚本类型= “文本/ JavaScript的” SRC = “JS/LAB.min.js”>'' '' ''<音频ID = “简历” 控制预载= “元数据”> <源SRC = “/ MP3/Mysong.mp3” 类型= “音频/ MPEG”> '' 'Download '' JS：musicfunctions.js的内容是主帖中的内容。 – Luca 2014-10-18 17:14:39

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

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

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

这个解决方案有两个问题：

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

我的解决方案如下。

HTML：定义一个类相关联的下载事件

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

JS（TrackDownload）：关联到类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>

也许有更优雅的解决方案，但这个工程。

来源

2014-11-01 20:24:51 Luca

jQuery下载后重新点击

回答

相关问题