В следующем примере, когда вы нажимаете на метку, вход меняет состояние.
document.querySelector("label").addEventListener("click", function() {
console.log("clicked label");
});
label {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<input type="checkbox" id="1">
<label for="1">Label</label>
В Chrome, при перемещении курсора между mousedown
и mouseup
событиями вход еще сработал, в то время как в Firefox флажок не изменяет состояние.
Есть ли способ это исправить? (без использования слушателей событий JavaScript)
Версия Firefox: 69.0.3 (64-bit)
Полный набор действий при использовании Chrome.
- Нажмите кнопку над ярлыком
- Переместите курсор вокруг (даже вне метки), удерживая при этом кнопку
- Вернуть курсор обратно на метку
- Отпустите кнопку
javascript
html
css
label
Ник Зум
источник
источник
1px
нарушит взаимодействие.Ответы:
Введение
Хотя я специально указал в вопросе, что ответ не должен включать JavaScript, все ответы работали с JavaScript.
Поскольку это, похоже, ошибка Firefox, и большинство ответов, представленных на этом этапе, потребуют от меня и остальной части моего кода, я решил создать сценарий, который можно запустить один раз, который будет обрабатывать все метки независимо от того, когда они добавляются в домен и будут оказывать наименьшее влияние на другие мои сценарии.
Решение - Пример
объяснение
onLabelClick
Функция
onLabelClick
должна вызываться при каждом нажатии метки, она проверит, имеет ли метка соответствующий элемент ввода. Если это произойдет, это вызовет его, удалитьfor
атрибут этикетки , так что браузеры не ошибка не будет повторно вызвать его , а затем использоватьsetTimeout
из0ms
для добавленияfor
атрибута обратно после того , как событие пузырилось. Это означает,event.preventDefault
что не нужно вызывать и, следовательно, никакие другие действия / события не будут отменены. Также, если мне нужно переопределить эту функцию, мне просто нужно добавить прослушиватель событий, который вызываетEvent#preventDefault
или удаляетfor
атрибут.manageLabel
Функция
manageLabel
принимает метку, проверяет, был ли уже добавлен прослушиватель событий, чтобы избежать его повторного добавления, добавляет прослушиватель, если он еще не был добавлен, и добавляет его в список управляемых меток.onLoad
Функция
onLoad
должна вызываться при загрузке страницы, чтобы в этот момент ееmanageLabel
можно было вызывать для всех меток в DOM. Функция также использует MutationObserver для перехвата любых добавляемых меток после того, как загрузка была запущена (и скрипт был запущен).Код, представленный выше, был оптимизирован Мартином Баркером .
источник
HTMLLabelElement
проверкой вместо HTMLElement и проверки того, что tagName было меткойЯ знаю, что вам не нужны слушатели событий JS, но я думаю, что вы хотите определить движение, которое это не делает, но использует mousedown вместо click (mousedown, а затем mouseup).
Хотя это известная ошибка в Firefox, вы можете обойти ее, используя событие mousedown
Я должен был изменить ваш идентификатор, чтобы быть действительным один идентификатор должен начинаться с символа
источник
querySelectorAll
) при загрузке страницы, а затем, каждый раз, когда метка добавляется в DOM. Это также может испортить любые прослушиватели событий мыши, добавленные к ярлыкам или к домену в целом, так как вы используете,Event#preventDefault
чтобы избежать двойного щелчка по браузерам, у которых нет этой ошибки. Наконец,click
лучше использовать событие, так как оно будет иметь то же взаимодействие, что и предполагаемое действие. Кроме этого, это лучший ответ на данный момент.preventDefault()
проблему, поэтому он работает, проверяя, изменил ли браузер его, если не изменил, через 150 мс достаточно быстро, чтобы пользователь не заметил его, и достаточно медленно, чтобы браузер действовал вовремя, если он собирается делать то, что должен. это лучше?Нет. Это похоже на ошибку Firefox, а не на проблему с вашим кодом. Я не верю, что есть обходной путь CSS для этого поведения.
Вы можете сообщить об этом в Mozilla и решить проблему, но я бы не стал полагаться на это. https://bugzilla.mozilla.org/home
Для возможного обходного пути я бы предложил вместо этого инициировать событие при mouseup.
источник
Без javascript, когда вы щелкаете по метке, у которой значение «for» совпадает со значением «id» входных данных, происходит щелчок по входу, но это не согласуется в браузерах.
Если браузер следует приведенному выше, событие кликования JavaScript отключит эффект, который в итоге ничего не сделает.
Решение
Чтобы обеспечить согласованность между браузерами, вы можете принять другую стратегию: Onload динамически изменяет все атрибуты «for» на «data-for», так что это обнуляет исходный эффект браузера. Затем вы можете применить событие клика к каждому ярлыку.
источник
document.attachEvent("onreadystatechange",
Я просто размышлял, как получилось, что ты пошел с этим, а нетdocument.addEventListener("DOMContentLoaded",
?Прикрепление события к документу и нацеливание на элемент, который вам требуется, должно решить эту проблему.
$ (Document) .on ('click', '.item', function (event) {});
Из чтения этой темы в прошлом, Firefox понимает ваши действия как попытку перетаскивания элемента, так как пользователь выбирает значение none, он просто предотвращает поведение по умолчанию.
Это основано на довольно ограниченных знаниях, но, похоже, это известная ошибка / причуда, и есть несколько статей, подтверждающих это.
источник
without using JavaScript event listeners
.