我在锚标记中嵌入了一个 HTML5 音频元素。我知道这有点奇怪，但在我的特定用例中它实际上很有意义。
我的问题是，每当我点击播放按钮时，父元素也会触发一个点击事件，将我带到 google.com
我为大多数浏览器解决了这个问题，方法是使用 jQuery 停止事件传播，如下所示：
$('audio').click(function(e) { e.stopPropagation(); });
这在 IE 和 Google Chrome 中运行良好。但它在 Firefox 中失败了。在 Safari 中，当我单击播放按钮时它会起作用，但如果我更改音量，也会在父元素上触发单击事件。
知道如何在 Firefox 和 Safari 中也能做到这一点吗？
【问题讨论】：
标签： jquery html html5-audio stoppropagation
我认为，如果您从事件处理程序中return false;，那么这似乎取消了 chrome 中的单击事件。见这里：http://jsfiddle.net/dLKD4/1/
【讨论】：
您应该改用有效的 HTML。无论如何，这应该可以解决您在 FF（和所有浏览器）中的问题：
$('audio').click(function (e) {
var $a = $(this).closest('a');
$a.data('href', $a.attr('href')).removeAttr('href');
}).on('mouseleave', function () {
var $a = $(this).closest('a');
$a.attr('href', $a.data('href'));
});
【讨论】：
这适用于 Firefox（这里是 jsfiddle）：
<div class="audio-container">
<p>You can click this entire box, and it will take you too http://google.com</p>
<audio controls>
<source src="http://www.freetone.me/ring/Root/Music/Adventure_Time_Wedding_bells_8bit.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>However, I would very much like to prevent this box's default click behaviour if a click is performed on the audio element...</p>
</div>
$('audio').click(function(e) { e.stopPropagation(); });
$('div').click(function(e) {
window.open("http://www.google.com/","_blank");
});
如您所见，一个小的变化是将您的 a 标签更改为 div 标签。不知道为什么，但可能 stopPropagation 方法由于与内联元素中的块级元素等有关。
当您将最高级别的祖先（在本例中为 a）更改为块级元素（在本例中为 div）时，它似乎可以工作很好。
【讨论】：