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下載後重新點擊

回答

相關問題