stopPropagation() not working for audio element in Firefox

Question

I have an HTML5 audio element embedded in an anchor tag. I know it's a bit weird, but it actually makes a lot of sense in my specific use case.

I have the problem that, whenever I click the play button, a click event is fired on the parent element as well, taking me to google.com

I solved this for most browsers by stopping event propagation with jQuery like so:

$('audio').click(function(e) { e.stopPropagation(); });

This works fine in IE and Google Chrome. But it fails in Firefox. In Safari it works when I click the play button, but if I change the volume a click event is fired on the parent element as well.

Any idea how to make this work in Firefox and Safari as well?

FIDDLE

Answer 1

This works in Firefox (here's the 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");
});

As you can see, the one small change was changing your a tag to a div tag. Not sure why, but maybe the stopPropagation method is acting up due to something to do with having block level elements inside inline elements, etc.

When you change your highest level ancestor (in this case, the a) to a block level element (in this case, the div), it seems to work just fine.