Firefox bug:如果调整大小,则单击事件丢失:焦点垂直设置

Question

问题:当textarea具有以下CSS时,Firefox会丢失第一个单击事件:

textarea:focus {
    resize: vertical;
}

请参阅演示:http://jsbin.com/wuxomaneba/edit？html,css,output

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

但是,我想知道为什么会发生这种情况,还有其他任何css规则或情况会发生这种情况.

Answer 1

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

该resize属性控制“匿名内容”，这些内容对网页不可见，但浏览器使用它来实现附加 UI，以方便用户。我的猜测是，对此内容的更改会干扰click事件检测，但如果不在调试版本中查看这一点，就不可能确定。

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>