Check the box inside the button element - problem with Firefox

Question

I want to know the reason why below JS Fiddle works well in chrome, but not in Firefox. Although the nesting of the checkbox inside the button may be wrong, I’m only interested in the theory underlying the difference between chrome and firefox in the context of my JS Fiddle.

Js fiddle

$(function(){ $("button.tablesaw-sortable-btn").on("click",function(){ alert("button clicked"); }); $("input#test").on("click",function(e){ e.stopPropagation(); }); }); 

Answer 1

Firefox and Chrome seem to handle the button events handle a little differently. The way Chrome handles the click event in this case is that it passes the event from Window through all descendants until input is reached - this is the capture phase, and then when it reaches input , it bubbles to Window passing through all descendants. And it processes events depending on different listeners that were called in both phases. In your case, since the bubble phase is located by default for the trigger phase, the click goes to the input, then you call stopPropagation , so it does not bubble, and your click on the button isn Doesn’t work. If you set the listener to work with the capture phase, you will see that the button starts, even if you have stopPropagation on your input . See here: https://jsfiddle.net/evxz483h/2/

Firefox seems to just bubble up when it reaches a button instead of going to input . So click never goes under the button. Note that this is similar to the specification of the input element, which should not be a descendant of a button:

The input of an interactive element should not appear as a child of a button element.

See here: http://www.w3.org/TR/html-markup/input.button.html

Therefore, I assume that this behavior is normal, or at least expected. Chrome has a nice way to handle it, which makes it more flexible, but maybe Firefox might be better in another case.