2013-04-03 19 views
6

Gdy element zawiera inny element, który jest animowany za pośrednictwem CSS transition, zdarzenia kliknięcia czasami nie są uruchamiane.Przeglądarka czasami ignoruje zdarzenie kliknięcia jQuery podczas transformacji CSS3

przypadek testowy: http://codepen.io/anon/pen/gbosy

Mam układ, gdzie szereg obrazy mają tytuły, które zostały ujawnione przy aktywowaniu. Po kliknięciu odpalają one od sąsiedniego elementu .slideDown. Oni sami mogą zostać szybko kliknięci przez użytkownika. Problem jest jeszcze bardziej zauważalny w witrynie na żywo niż w codepen.

W kodzie współdzielącym około 90% moich kliknięć jest przestrzeganych, natomiast gdy przejścia CSS są wyłączone, 100% jest przestrzegane.

Wszelkie sugestie są mile widziane.

Muszę zauważyć, że problem jest najłatwiejszy do zreplikowania w Chrome, ponieważ jest mniej powszechny w Safari i znacznie mniej popularny w Firefoksie.

Odpowiedz

13

Myślę, że kluczem jest wyłączenie zdarzeń myszy w elementach t:

p { 
    pointer-events: none; 
} 

powstaje problem, ponieważ kliknięcie jest generowany z mousedown + A mouseUp, a jeśli nie to na skraju przejście mousedown jest w jednym elemencie, a mouseup w innym (i to nie generuje kliknięcia).

Innym sposobem wokół (naprawdę nie to samo, ale najprawdopodobniej użytkownicy nie zauważy) robi to w mousedown zamiast kliknięcia

+0

To działa wspaniale. Dziękuję, nie wiedziałem nawet o tej własności CSS. Jedynym moim problemem jest to, że nie jest on w ogóle obsługiwany na IE: https://developer.mozilla.org/en/docs/CSS/pointer-events Czy zdajesz sobie sprawę z tego, że możesz to zrobić w szerszym zakresie? –

+0

@Magnakai Intryguje mnie to, że jeśli kliknę linki wymiennie bardzo szybko, domyślne wywołanie nie powiedzie się, a łącze zostanie wykonane (adres URL zostanie załadowany). Nie jestem pewien, dlaczego tak się dzieje. –

+4

problem powstaje, ponieważ kliknięcie jest generowane z mousedown + a mouseup, a jeśli robisz to na krawędzi przejścia, mousedown jest w jednym elemencie, a mouseup w innym (i to nie generuje kliknięcia). Na odwrót (nie tak samo, ale prawdopodobnie użytkownicy tego nie zauważą) robi to w mousedown zamiast kliknij – vals

Powiązane problemy