Click on checkbox inside a button element - Firefox issue

Question

I wish to know the reason that why the below JS Fiddle works well in chrome but not In Firefox. Although nesting checkbox inside button might be wrong, But I'm only interest to know the theory behind working difference between chrome and firefox in 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

It seems Firefox and Chrome handle button events dispatching slightly differently. The way Chrome handles the click event in that case is that it propagates the event from Window through all the descendants until the input is reached- this is the capture phase, then once it reaches input, it bubbles up to Window passing again through all descendants. And it handles events depending on the different listeners that have been called in both phase. In your case, since the default for the trigger phase is the bubble phase, the click goes through to the input, then you call stopPropagation, so it doesn't bubble up, and your click on the button isn't triggered. If you set your listener to work with capture phase, you'll see that the button is triggered even if ou have stopPropagation on your input. See here: https://jsfiddle.net/evxz483h/2/

What Firefox seems to do is to simply bubble up when it reaches the button instead of going down to the input. So the click never goes beneath button. Note that this seems to fit with specs of input element, that shouldn't be a descendant of a button:

The interactive element input must not appear as a descendant of the button element.

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

So I guess this behavior is normal, or at least expected. Chrome has a nice way of handling it making it a bit more flexible, but maybe in some other case Firefox way might be better also.