单击按钮元素内的复选框 - Firefox问题

Question

我想知道为什么下面的JS Fiddle在chrome中运行良好而在Firefox中运行良好的原因.尽管在按钮内嵌入复选框可能是错误的,但我只想知道在我的JS Fiddle的上下文中使用chrome和firefox之间的差异理论背后的理论.

JS小提琴

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

Answer 1

Firefox 和 Chrome 处理调度的方式似乎button events略有不同。在这种情况下，Chrome 处理事件的方式click是，它将事件从Window所有后代传播，直到input达到 - 这是capture阶段，然后一旦到达input，它bubbles就会Window再次传递到所有后代。它events根据两个阶段中调用的不同侦听器进行处理。在您的情况下，由于触发阶段的默认值是冒泡阶段，因此单击会进入输入，然后您调用stopPropagation，因此它不会冒泡，并且您的clickonbutton不会被触发。如果您将您的设置设置listener为使用capture阶段，您将看到该按钮被触发，即使您stopPropagation的input. 请参阅此处： https: //jsfiddle.net/evxz483h/2/

Firefox 似乎所做的就是在到达 时简单地向上冒泡，button而不是向下到达input. 所以click永远不会低于按钮。请注意，这似乎符合input元素的规范，它不应该是按钮的后代：

交互元素输入不得显示为按钮元素的后代。

请参阅此处： http: //www.w3.org/TR/html-markup/input.button.html

所以我想这种行为是正常的，或者至少是预料之中的。Chrome 有一个很好的处理方式，使其更加灵活，但也许在其他情况下 Firefox 的方式也可能更好。