Question

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

$(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，因此它不会冒泡，而您的click button未被触发。如果您将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方式也可能更好。

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

1 个答案: