Javascript Firefox错误：如果resize:vertical设置为焦点，则单击事件丢失

问题：当textarea具有以下CSS时，Firefox将丢失第一次单击事件：

textarea:focus {
    resize: vertical;
}

请参见演示：

解决方法很简单-删除

：focus

选择器

---

但是，我想知道为什么会发生这种情况，以及是否有其他css规则或情况会发生这种情况。

这是因为当您单击“调整大小”按钮时，您不会关注文本区域，而是关注Firefox上的“调整大小”按钮。我不知道这是否是一个错误，但它看起来像是有意的。移除

：焦点
移除了聚焦文本区域的要求，因此，当您按住resize按钮（该按钮仅垂直移动）时，它适用。
最简单的方法是使用jQuery焦点。对我来说，它更简单有效，适用于所有类型的浏览器

如果需要，请将焦点放在加载页面上

$( document ).ready(function() {
     $('#txtId').focus();
});

虽然这看起来确实像一个bug（感谢您归档！），但通常会将一个单击事件发送到观察到
mousedown
和
mouseup
事件的最深元素。因此，您可以通过移动
：focus
（例如
位置：绝对；top:xxx
）上的文本区域来类似地“中断”单击事件-这是因为事件的顺序是mousedown->focus（更新网页）->mouseup->click

resize
属性，该属性对网页不可见，但浏览器使用它来实现附加的用户界面，以方便用户。我的猜测是，对该内容的更改会干扰，但如果不在调试构建中查看这一点，就不可能确定


函数logEvent（ev）{console.log（ev.type，window.getComputedStyle（document.querySelector（“textarea”））.resize）}
document.querySelector（“textarea”）.addEventListener（“mousedown”，logEvent，false）；
document.querySelector（“textarea”）.addEventListener（“焦点”，logEvent，false）；
document.querySelector（“textarea”）.addEventListener（“mouseup”，logEvent，false）；
document.querySelector（“textarea”）.addEventListener（“单击”，logEvent，true）
text区域：焦点{
位置：绝对；顶部：500px；
/*调整大小：垂直*/
}
点击我
你考虑过在Bugzilla上安装bug吗？如果你愿意，我可以帮你。是的，已经提交，谢谢你的提议。为什么不在textarea上尝试onfocus事件，这在您的案例中更符合逻辑？问题是什么？Firefox bug是如何工作的？恐怕没人知道。欢迎来到SO！请编辑你的答案，并解释一下它解决问题的程度，你的解决方案是什么。。。有关更多指导：