Question

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

:focus

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

解决方案很简单 - 删除$var[] = basename($row['filePath']);选择器。

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

Answer 1

这是因为当您点击调整大小按钮时，您不会专注于textarea，而是专注于Firefox上的调整大小按钮。我不知道这是不是一个bug，但它看起来像是故意的。删除:focus会删除关注textarea的要求，因此当您按住调整大小按钮时它会适用，该按钮仅垂直移动。

Answer 2

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

网页上看不见的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>

Answer 3

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

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

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

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

3 个答案: