ngClick on div inside a button does not work in Firefox

[janparadowski]

This silly example does not work in Firefox:

http://plnkr.co/edit/4a6CWwBI9TxT1Q3vumk6

Seems to work in all other browsers I tested.

[pkozlowski-opensource]

@janparadowski this is invalid HTML according to the spec, you can only have Phrasing content within a <button> tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

[janparadowski]

OK, so try replacing div with span as that is phrasing content

http://plnkr.co/edit/KOmnfhsng774G3AnxutC?p=preview

Still same behavior...

[pkozlowski-opensource]

@janparadowski ok, but it seems like the pb has nothing to do with AngularJS, people are reporting the same pb with jQuery, for example: http://stackoverflow.com/questions/8187854/jquery-event-bubbling-on-button-not-working-as-expected-in-firefox

If FFox doesn't give us per-element events in this case, I'm afraid that we can't do much about it. But it seems like FFox is doing the right thing here: http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-button-element

Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Phrasing content, but there must be no interactive content descendant.

You might want to report this thing to FFox guys / HTML spec authors, but I must say that, as a user, I find your choice of HTML tags (where there are 2 actions inside a button) very confusing, and seems I'm not the only one: http://stackoverflow.com/questions/11069410/click-event-for-element-nested-within-a-button

[janparadowski]

Thank you for the details. All very helpful

[zac-ironspine]

I ran across this same issue in a task I was working on today. This may be old advice at this point but in case someone chances across this like I have here is what I found to work.

Firefox doesn't pick up the ng-click event inside the button tag, but if you move your ng-click event up to the button itself it fires every time.

< button ng-click="functionCall()" >< span >Content here.....< /span >< /button >

^^this is how it will function in firefox. Other browsers, will pick up the ng-click events if they are on the span tag inside the button, but for full cross-browser compatibility you need to change up the design a bit. Which means in your particular case you need 2 separate buttons.

To bypass that issue you could make a div, style it to look like a button, then inside the div keep your separate span tags with the click events.

< div class="styleLikeButton" >
< span ng-click="count = count+1" >Increment< /span >
< span ng-click="count = count-1">Decrement< /span >
< /div >

^^ this would work cross browser, and still keep your "button" functioning.

Sorry for the lengthy explanation, hope it helps someone in the future.

[alisha17]

@zac-ironspine It was very helpful! Solved a big problem of mine. Thanks.

[jlopela]

We found we were using anchor tags within our buttons and that broke them. Removing the anchors fixed it for us.
Example:
<button> <a ng-click="updateApproval('approve')">Approve</a></button>
<button ng-click="updateApproval('approve')">Approve</button>

[Narretz]

Interactive elements like anchors and buttons should never have other interactive elements as children. The HTML spec explicitly says so: https://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-button-element

Please don't do this, as it is also bad for accessibility.