0

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.

enter image description here

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

Jules Colle
  • 11,227
  • 8
  • 60
  • 67

3 Answers3

1

I think if you return false; from the event handler then this seems to cancel the click event in chrome. See here: http://jsfiddle.net/dLKD4/1/

Captain John
  • 1,859
  • 2
  • 16
  • 30
  • Thanks, but things are working fine in Chrome. The problem exists only in firefox and partially in safari. Your solution "works" in firefox as well, but it cancels the play event as well. So it's kind of useless. – Jules Colle Jan 10 '14 at 19:24
1

You should use valid HTML instead. Anyway, this should fix your issue in FF (and all browsers):

jsFiddle

$('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'));
});
A. Wolff
  • 74,033
  • 9
  • 94
  • 155
  • +1 It works, but you're right that the solution is a lot cleaner if I could just wrap the audio element in a div with an on click event, like JoshBeam suggested. – Jules Colle Jan 10 '14 at 19:47
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.

Josh Beam
  • 19,292
  • 3
  • 45
  • 68
  • ya, why not using valid HTML +1 – A. Wolff Jan 10 '14 at 19:27
  • @A.Wolff what is not valid about my HTML? Since HTML5 the anchor tag can contain whatever elements you want, right? – Jules Colle Jan 10 '14 at 19:29
  • 1
    @JulesColle where did you see an anchor tag can contain block element in HTML5? – A. Wolff Jan 10 '14 at 19:32
  • @A.Wolff Here, for example http://davidwalsh.name/html5-elements-links and here http://stackoverflow.com/questions/6061869/are-block-level-elements-allowed-inside-inline-level-elements-in-html5 – Jules Colle Jan 10 '14 at 19:36
  • @A.Wolff It just looks nicer semantically I guess. Just couldn't figure out why it didn't work like this. Anyhow, even though you weren't right about block level elements not being allowed in anchor tags, it turned out my HTML was indeed invalid. there's an obscure rule that says "The element audio with the attribute controls must not appear as a descendant of the a element." So thanks for pointing me in the right direction. – Jules Colle Jan 10 '14 at 19:41