2013-04-03 1 views
6

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

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

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

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

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

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

ответ

13

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

p { 
    pointer-events: none; 
} 

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

Другой путь (на самом деле не то же самое, но, скорее всего, пользователи не заметят) делает это в MouseDown вместо щелчка

+0

Это работает удовольствие. Спасибо, я даже не знал об этом свойстве CSS. Моя единственная проблема заключается в том, что она не поддерживается в IE вообще: https://developer.mozilla.org/en/docs/CSS/pointer-events Знаете ли вы о каких-либо способах достижения более широко поддерживаемых? –

+0

@ Magnakai Что меня заинтриговало, если я нажимаю на ссылки взаимозаменяемо очень быстро, вызов по умолчанию невозможен, и ссылка выполняется (URL-адрес загружен). Я не знаю, почему это происходит. –

+4

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