Браузер иногда игнорирует событие щелчка jQuery во время преобразования CSS3

Когда элемент содержит другой элемент, который анимируется с помощью CSS transition, события щелчка иногда не запускаются.

Тестовый пример: http://codepen.io/anon/pen/gbosy

У меня есть макет, в котором ряд изображений имеет подписи, которые отображаются при наведении. При щелчке они запускают .slideDown соседнего элемента. Сами они, скорее всего, будут быстро пролистаны пользователем. На действующем сайте проблема еще более заметна, чем на кодепе.

В codepen соблюдаются примерно 90% моих кликов, тогда как, когда переходы CSS отключены, соблюдаются 100%.

Любые предложения приветствуются.

Я должен отметить, что эту проблему проще всего воспроизвести в Chrome, она менее распространена в Safari и значительно реже в Firefox.


jquery css css-transitions jquery-on
person Jodi Warren    schedule 03.04.2013    source источник

Ответы (1)


arrow_upward
13
arrow_downward

Я думаю, что ключ отключает события мыши в элементах p:

p {
  pointer-events: none;
}

проблема возникает из-за того, что щелчок генерируется из mousedown + mouseup, и если вы делаете это на краю перехода, mousedown находится в одном элементе, а mouseup - в другом (и это не генерирует щелчок).

Наоборот (не совсем то же самое, но, скорее всего, пользователи этого не заметят) делает это в mousedown вместо щелчка

person vals    schedule 03.04.2013
comment
Это работает удовольствие. Спасибо, я даже не знал об этом свойстве CSS. Моя единственная проблема заключается в том, что он вообще не поддерживается в IE: developer.mozilla.org /en/docs/CSS/pointer-events Известны ли вам какие-либо более широко поддерживаемые способы сделать это? - person Jodi Warren; 03.04.2013
comment
@Magnakai Что меня заинтриговало, так это то, что если я очень быстро нажимаю на взаимозаменяемые ссылки, вызов prevent-default терпит неудачу, и ссылка выполняется (URL-адрес загружается). Я не уверен, почему это происходит. - person Šime Vidas; 03.04.2013
comment
проблема возникает из-за того, что щелчок генерируется из mousedown + mouseup, и если вы делаете это на краю перехода, mousedown находится в одном элементе, а mouseup - в другом (и это не генерирует щелчок). Наоборот (не совсем то же самое, но, скорее всего, пользователи этого не заметят) делает это в mousedown вместо щелчка - person vals; 03.04.2013
comment
@vals Спасибо! Вот именно, хорошо подмечено и хорошо объяснено. Кстати, как вы это диагностировали? Это проблема, с которой вы сталкивались раньше? - person Jodi Warren; 03.04.2013
comment
Не совсем так, но да, я уже столкнулся с этой проблемой. И я знаю, что вы можете разозлиться на такие вещи. Приятно, что это вам помогает. Кстати, может быть естественнее делать это в мышке, на ваше усмотрение. - person vals; 03.04.2013
comment
омг, ты гений, это меня беспокоило последние дни - person Máthé Endre-Botond; 23.12.2014
comment
МОЙ БОГ! Вы спасли мою ночь! Я сталкиваюсь с этой проблемой только в Firefox - person Ritwick Dey; 19.12.2017