Ошибка Firefox: событие клика потеряно, если изменить размер: вертикальный набор по фокусу

Проблема: Firefox теряет первый клик, когда текстовое поле имеет следующий CSS:

textarea:focus {
    resize: vertical;
}

Смотрите демонстрацию: http://jsbin.com/wuxomaneba/edit?html,css,output

Решение этого просто - удалите селектор :focus.

Однако я хотел бы знать, почему это происходит, и есть ли какие-либо другие правила или ситуации css, где это может произойти.

Ответ 1

Хотя это выглядит как ошибка (спасибо за регистрацию!), Обычно событие щелчка отправляется на самый глубокий элемент, который наблюдал события mousedown и mouseup. Таким образом, вы можете аналогичным образом "прервать" событие щелчка, переместив текстовое поле на :focus (например, position:absolute; top: xxx) - это потому, что порядок событий mousedown-> focus (обновляет веб-страницу) → mouseup-> нажмите кнопку.

Свойство resize управляет "анонимным контентом", который невидим для веб-страницы, но используется браузером для реализации дополнительного пользовательского интерфейса для удобства пользователя. Я предполагаю, что изменения в этом контенте мешают обнаружению событий 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>

Ответ 2

Это происходит потому, что когда вы нажимаете кнопку изменения размера, вы не фокусируетесь на текстовом поле, а на кнопке изменить размер в Firefox. Я не знаю, является ли это ошибкой или нет, но похоже, что это было предназначено. Удаление :focus устраняет необходимость фокусировки на текстовом поле, поэтому оно применяется, когда вы удерживаете кнопку изменения размера, которая идет только вертикально.

Ответ 3

использовать JQuery, событие onlcick

$("textarea").click(function() {
alert("clicked");
});

Ответ 4

Самый простой способ - использовать фокус jQuery. Для меня это более просто, но эффективно и применимо ко всем видам браузеров.

Если хотите, сфокусируйтесь на загрузке страницы.

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