javascript - 火狐漏洞 : click event lost if resize:vertical set on focus

Question

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

textarea:focus {
    resize: vertical;
}

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

这个问题的解决方案很简单 - 删除 :focus 选择器。

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

Answer 1

虽然这看起来确实像一个错误(感谢您提交它!)，但通常会将点击事件分派(dispatch)到观察到 mousedown 和 mouseup 事件的最深元素.因此，您可以通过移动 :focus 上的文本区域(例如 position:absolute; top: xxx)类似地“中断”点击事件 - 这是因为事件的顺序是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>