为什么浏览器在决定调用哪个 onclick 事件处理程序之前首先应用 CSS 样式？
Why does a browser apply CSS styles first before deciding what onclick event handler to call?
我在一个页面上有一个 div。它有一个 onclick 事件处理程序。当用户单击 div 时，我希望事件处理程序将被调用。但是也有这个 CSS 规则：当那个 div 有焦点时，它将向右移动 50 个像素（远离鼠标指针）。因此，onclick 事件处理程序不会被调用，即使用户在开始时明确地单击了 div。就好像浏览器首先应用 CSS，然后才决定用户点击了什么。
这里做了一个简单的demo：https://jsbin.com/yalazam/edit?html,css,console,output点击第四栏黄色方块（也就是thediv），可以看到控制台在第三列。只会显示一条消息 "focus square"，而不是 "click square".
这种行为有意义吗？有什么情况有用吗？或者我应该把它当作浏览器的一种奇怪行为来接受吗？
这里的相关点在于definition什么是点击事件：
An element receives a click event when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
If the button is pressed on one element and the pointer is moved outside the element before the button is released, the event is fired on the most specific ancestor element that contained both elements.
这意味着在您的示例中，不会在您定位的 div 上触发任何 click 事件，因为尽管鼠标按下发生在 div 内，但释放发生在它移动之后（除非用户做了一些不自然的事情）所以不在同一个元素中。 click 事件 将 在 body 上触发（在您的示例中是 MDN 上提到的“最具体的祖先”），但这不会对您的聆听非常有帮助 - 因为 body 上的 click 可以以许多其他方式发生，并且您不能使用事件的 target 属性 来查看它起源于何处，因为在这种情况下，如所解释的那样，它是 body 本身。
如果您确实需要此效果，则使用 mouseDown 或 mouseUp 事件而不是 click，具体取决于感觉最自然的情况给你。但真正的答案是不要这样做，因为这可能会让您的用户出乎意料并惹恼他们。
我在一个页面上有一个 div。它有一个 onclick 事件处理程序。当用户单击 div 时，我希望事件处理程序将被调用。但是也有这个 CSS 规则：当那个 div 有焦点时，它将向右移动 50 个像素（远离鼠标指针）。因此，onclick 事件处理程序不会被调用，即使用户在开始时明确地单击了 div。就好像浏览器首先应用 CSS，然后才决定用户点击了什么。
这里做了一个简单的demo：https://jsbin.com/yalazam/edit?html,css,console,output点击第四栏黄色方块（也就是thediv），可以看到控制台在第三列。只会显示一条消息 "focus square"，而不是 "click square".
这种行为有意义吗？有什么情况有用吗？或者我应该把它当作浏览器的一种奇怪行为来接受吗？
这里的相关点在于definition什么是点击事件：
An element receives a
clickevent when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element. If the button is pressed on one element and the pointer is moved outside the element before the button is released, the event is fired on the most specific ancestor element that contained both elements.
这意味着在您的示例中，不会在您定位的 div 上触发任何 click 事件，因为尽管鼠标按下发生在 div 内，但释放发生在它移动之后（除非用户做了一些不自然的事情）所以不在同一个元素中。 click 事件 将 在 body 上触发（在您的示例中是 MDN 上提到的“最具体的祖先”），但这不会对您的聆听非常有帮助 - 因为 body 上的 click 可以以许多其他方式发生，并且您不能使用事件的 target 属性 来查看它起源于何处，因为在这种情况下，如所解释的那样，它是 body 本身。
如果您确实需要此效果，则使用 mouseDown 或 mouseUp 事件而不是 click，具体取决于感觉最自然的情况给你。但真正的答案是不要这样做，因为这可能会让您的用户出乎意料并惹恼他们。