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

Question

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

JS Fiddle

$(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，它就会冒泡 直到 Window 再次通过所有后代。它根据在两个阶段调用的不同监听器处理事件。在您的情况下，由于触发阶段的默认值是冒泡阶段，点击进入输入，然后您调用 stopPropagation，因此它不会冒泡，您的 click 按钮 上的 未被触发。如果您将 listener 设置为使用 capture 阶段，您会看到按钮被触发，即使您的 上有 stopPropagation >输入。看这里:https://jsfiddle.net/evxz483h/2/

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

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

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

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