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ć. ;/

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.

@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:

[PHP] pobierz, plaintext 
$('a').on('click', function() {
return false;
});
[PHP] pobierz, plaintext 

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.

Nie doczytałem tam 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 
$(".color").focus(function() {
	// tło zmienia się na kolor z diva przechowywany np. w data-hex czy czymkolwiek
});
 
$(".color").blur(function() {
	// tło zmienia się normalne
});
[JAVASCRIPT] pobierz, plaintext 

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.

Kombinujesz jak koń/słoń pod górkę

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?

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.

Cieszę się, że znalazłeś rozwiązanie, choć nie popieram go