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

Posted 2023-03-06

【中文标题】Firefox 错误：如果 resize:vertical 设置为焦点，单击事件会丢失

【英文标题】：Firefox bug: click event lost if resize:vertical set on focus

【发布时间】：2015-10-10 20:28:57

【问题描述】：

问题：当文本区域具有以下 CSS 时，Firefox 会丢失第一次点击事件：

textarea:focus 
    resize: vertical;

查看演示：http://jsbin.com/wuxomaneba/edit?html,css,output

解决方案很简单 - 删除 :focus 选择器。

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

【问题讨论】：

您是否考虑过在 Bugzilla 上提交错误？如果您愿意，我可以帮助您。

是的，已提交，感谢您的报价。 bugzilla.mozilla.org/show_bug.cgi?id=1186140

你为什么不在 textarea 上尝试 onfocus 事件，在你的情况下使用它更合乎逻辑？

有什么问题？ Firefox 错误是如何工作的？恐怕没人知道。

【参考方案1】：

虽然这看起来确实像一个错误（感谢您提交它！），但通常会向观察到 mousedown 和 mouseup 事件的最深元素分派一个 click 事件。因此，您可以通过在:focus（例如position:absolute; top: xxx）上移动textarea 来类似地“中断”点击事件——这是因为事件的顺序是mousedown->focus（更新网页）->mouseup->click。

resize 属性 controls "anonymous content" 对网页不可见，但被浏览器用于实现额外的 UI 以使用户受益。我的猜测是对此内容的更改会干扰click event detection，但如果不在调试版本中查看此内容，则无法确定。

function logEvent(ev) console.log(ev.type, window.getComputedStyle(document.querySelector("textarea")).resize)

document.querySelector("textarea").addEventListener("mousedown", logEvent, false);
document.querySelector("textarea").addEventListener("focus", logEvent, false);
document.querySelector("textarea").addEventListener("mouseup", logEvent, false);
document.querySelector("textarea").addEventListener("click", logEvent, true);

textarea:focus
  position:absolute; top: 500px;
  /*resize:vertical;*/

<textarea>click me</textarea>

【参考方案2】：

这是因为当您单击调整大小按钮时，您不会关注文本区域，而是关注 Firefox 上的调整大小按钮。我不知道这是否是一个错误，但它看起来像是故意的。移除 :focus 移除了关注文本区域的要求，因此它适用于您按住仅垂直移动的调整大小按钮时。

【参考方案3】：

最简单的方法是使用 jQuery 焦点。对我来说，它更简单但更有效，适用于所有类型的浏览器。

如果您希望它专注于加载页面。

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

【讨论】：

欢迎来到 SO！请编辑您的答案并解释一下它在多大程度上解决了问题，您的解决方案做了什么，...更多指导：***.com/help/how-to-answer