Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript]Problem z blur
ShadowD
post
Post #1





Grupa: Zarejestrowani
Postów: 1 333
Pomógł: 137
Dołączył: 25.03.2008
Skąd: jesteś??

Ostrzeżenie: (0%)
-----


Mam pewnie banalny problem, ale nie za bardzo wiem jak go rozwiązać, może ktoś zna rozwiązanie to pomoże. ;-)

Mam na stronie 2 elementy, osobne div w body, nazwijmy je #blue i #red, chcę by po kliku na #blue zmieniło mu się tło na nieniski, a po zejściu z tego elementu tło wróciło do normy, pierwsze rozwiązanie to dodać w jq eventy click i blur i wszystko śmiga jak trzeba. Jednak dochodzi element #red sam w sobie nie ma eventów, jednak jak klikniemy na #blue a potem przejdziemy na #red, to #blue nadal ma mięć swoje niebieskie tło do czasu nie zejście albo z #blue albo z #red. Powiedział bym że chcę coś takiego uzyskać:

[js]
$('#blue').on('click', function(){
//tło zmienia się na niebieski
});

$('#blue').on('blur', function(){
//tło zmienia się na normalne});
[/js]

Tylko jak do blur'a dodać coś co zapobiegnie zmiany tła po kliku na #red? Próbowałem dodać zamiast blur $('body').on('click'), a w #red blokować propagację, ale gdy na stronie pojawią się inne elementy też z blokadą propagacji będzie problem nie znikania tła.

Dodam że elementów na stronie typu #blue jest wiele, a #red jest jeden, po przejściu z jednego #blue na drugi, pierwszemu znika tło, a drugiemu się pojawia - ale po przejściu na #rad nic się nie dzieje nie zależnie do tego w jakim #blue jesteśmy. Wypadało by w blur'ze jakoś wykluczyć #red, ale nie mam pojęcia jak to zrobić. ;/
Go to the top of the page
+Quote Post
SmokAnalog
post
Post #2





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----


Ja bym w ogóle zrezygnował ze zdarzenia blur dla divów. Może usuwaj zaznaczenia przy clicku na body? Wtedy musisz pamiętać, że klik na Twoich divach wywoła również klik na body (bo one są w body). Nastąpiłoby zaznaczenie i natychmiastowe odznaczenie. Lekarstwem na to jest event.stopPropagation() - poczytaj.
Go to the top of the page
+Quote Post
ShadowD
post
Post #3





Grupa: Zarejestrowani
Postów: 1 333
Pomógł: 137
Dołączył: 25.03.2008
Skąd: jesteś??

Ostrzeżenie: (0%)
-----


@SmokAnalog przeczytałeś mój wpis do końca? :/ Nie bym był jakoś nie wdzięczny za próbę pomocy, ale o Twoim rozwiązaniu pisałem i o jego nie pożądanych skutkach też, a mój kod ma robić rolę pluginu, a dobrze wiem że często można spotkać zabiegi typu:

  1. $('a').on('click', function() {
  2. return false;
  3. });


Które tak jaki i stopPropagation() blokują rozchodzenie się eventu w górę dom'u, tym samym blokując moje wywołanie click na body. Szukam lepszego rozwiązania, to mam aktualnie użyte.
Go to the top of the page
+Quote Post
SmokAnalog
post
Post #4





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----


Nie doczytałem tam (IMG:style_emoticons/default/tongue.gif) Czy nie jest tak, że i tak najpierw odpala się blur(), a potem focus() (przeciwieństwem blur jest focus, a nie click, tak swoją drogą).

Czyli:
[JAVASCRIPT] pobierz, plaintext
  1. $(".color").focus(function() {
  2. // tło zmienia się na kolor z diva przechowywany np. w data-hex czy czymkolwiek
  3. });
  4.  
  5. $(".color").blur(function() {
  6. // tło zmienia się normalne
  7. });
[JAVASCRIPT] pobierz, plaintext
Go to the top of the page
+Quote Post
ShadowD
post
Post #5





Grupa: Zarejestrowani
Postów: 1 333
Pomógł: 137
Dołączył: 25.03.2008
Skąd: jesteś??

Ostrzeżenie: (0%)
-----


Click a focus w tym przypadku jest jednym i tym samym, nie robią mi różnicy.

Może jeszcze raz od początku.
http://jsfiddle.net/39jtK/5/
Tutaj pola działają ok, chcę tylko by pole nie zmieniało się na białe jak ktoś kliknie na bar, pole ma być tak jak by nadal zaznaczone.

http://jsfiddle.net/39jtK/6/
Tutaj z kolei pola i bar działają ok, ale da się zaznaczyć 2 pola na raz (klik na 1 potem od razu na 2), click na 2 element nie wywoła clicku na body - zostanie zablokowany przez return false - niestety tego nie mogę zmienić.

Wnioskuję że najlepiej było by użyć blur'a, ale blokować go jakoś, niestety blur wykonuje się jako pierwszy przed ew. clickiem na bar i ustaleniem blokady, chciał bym bar i input traktować tak samo jako jedno, ale fizycznie nie mogą być w jednym znaczniku - strona zawiera wiele inputów, a jeden bar.
Go to the top of the page
+Quote Post
SmokAnalog
post
Post #6





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----


Kombinujesz jak koń/słoń pod górkę (IMG:style_emoticons/default/smile.gif)
  1. Po co dajesz return false po kliku? To przydatne przy linkach, ale z divami chyba nic nie robi?
  2. Value nie jest prawidłowym atrybutem div-a.
  3. Zamiast .on(), używaj .click() / blur() / focus() itd.
  4. Co tak naprawdę ma robić ten bar?
Go to the top of the page
+Quote Post
ShadowD
post
Post #7





Grupa: Zarejestrowani
Postów: 1 333
Pomógł: 137
Dołączył: 25.03.2008
Skąd: jesteś??

Ostrzeżenie: (0%)
-----


1, 2, 4 - to uproszczony przykład do bólu. 3 - z pominięciem drugiego parametru daje identyczny efekt jak wyżej wymienione.

Odpowiedzą na moje problemy okazał się po prostu event mousedown z returnem blokujący propagację jeszcze przed wywołaniem blur'a.
Go to the top of the page
+Quote Post
SmokAnalog
post
Post #8





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----


Cieszę się, że znalazłeś rozwiązanie, choć nie popieram go (IMG:style_emoticons/default/wink.gif)
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 20.12.2025 - 16:53