jQuery: Bubbling verhindern

[ottogal]

Hallo in die Runde,

ich habe ein Div "Info", das sich beim Anklicken verbirgt:
$('#Info').click( function() { $(this).hide(); });

Nun enthält das Div eine form #Form mit einem select-Element "Opt":

<form id="Form">  
<select id="Opt" name="Opt" size="1">  
<option value="1" selected="selected">1</option>  
<option value="2">2</option>  
</select>  
</form>

das in folgender Weise auf Änderungen reagiert:

$('#Form #Opt').bind('change keyup',  
function() {  
// tu was  
});

Wenn jedoch auf das Auswahlfeld geklickt wir, um eine andere Option zu wählen, verschwindet das Div: das Ereignis wird von ihm als Klick übernommen.

Ich dachte nun, dass dieses Bubbling durch folgende Maßnahme zu verhindern wäre:

$('#Form #Opt').bind('change keyup',  
function(event) {  
event.stopPropagation();  
// tu was  
});  
});

Das klappt aber nicht, und ich frage mich - und nun euch -, weshalb.

Mit Dank und Gruß
ottogal

[dave]

Hi,

Das klappt aber nicht, und ich frage mich - und nun euch -, weshalb.

Weil du nur bei change und keyup, nicht aber bei click "stopPropagation" aufrufst.

~dave

[ChrisB]

Hi,

Wenn jedoch auf das Auswahlfeld geklickt wir, um eine andere Option zu wählen, verschwindet das Div: das Ereignis wird von ihm als Klick übernommen.

Ich dachte nun, dass dieses Bubbling durch folgende Maßnahme zu verhindern wäre:

$('#Form #Opt').bind('change keyup',

function(event) {
event.stopPropagation();
// tu was
});
});

>   
> Das klappt aber nicht, und ich frage mich - und nun euch -, weshalb.  
  
Weil du an dieser Stelle das Bubbling der Events change und keyup verhinderst – aber das sind nicht die Events, die das Verstecken des Divs bei dir auslösen.  
  
D’oh!  
  
Also: Verhindere das Bubbling des Events, dass das Verstecken des Divs auslöst. (Oder frage in der Behandlung des click-Events auf dem Div ab, ob es selber das target war, oder ein Nachfahren-Element.)  
  
MfG ChrisB  
  

-- 
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

[Gunnar Bittersmann]

@@ottogal:

nuqneH

$('#Info').click( function() { $(this).hide(); });

show() and hide() considered harmful.

Warum click()? …

$('#Form #Opt').bind('change keyup',

Warum [code lang=javascript]bind()

  
Qapla'

-- 
Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)

[Rotzläffel]

gunnar,

in dem verlinkten Thread schreibst du

"Ändere keine CSS-Eigenschaften per JavaScript!"

Wie genau meinst du das? Wie soll man denn sonst dynamisch CSS-Eigenschaften ändern?

Rotzläffel

[Gunnar Bittersmann]

@@Rotzläffel:

nuqneH

"Ändere keine CSS-Eigenschaften per JavaScript!"

Wie genau meinst du das? Wie soll man denn sonst dynamisch CSS-Eigenschaften ändern?

Gar nicht.

Qapla'

[Rotzläffel]

Hi

Gar nicht.

ok, ich habe eine Anwendung. In dieser werden Tabellenfeldern Stati zugeordnet und diese durch Farben (td) repräsentiert.
Zum Beispiel ist Status 1 = rot, Status 2 = blau usw.

Ich mache das (stark simplifiziert) und in Pseudocode mit

  
$("td id").clickEvent(){  
   this.setStyle("background-color", "rot");  
}  

Besser wäre aber

  
$("td id").clickEvent(){  
   this.setClass("red");  
}  

Verstehe ich das richtig? In meiner Applikation verarbeite ich zur Zeit ca. 200 Stati, was 200 Farben entspricht. Ich sollte also für diese zweihundert Farben Klassen anlegen, und diese später zu refernezieren?

grüße
Rotzläffel

[Gunnar Bittersmann]

@@Rotzläffel:

nuqneH

Besser wäre aber

$("td id").clickEvent(){
   this.setClass("red");
}

  
Nicht wirklich. Besser wäre, die Klasse nach der Funktion, nicht nach der Darstellung zu benennen. Also danach, was sie repräsentiert, nicht danach, wie sie präsentiert wird.  
  

> In meiner Applikation verarbeite ich zur Zeit ca. 200 Stati  
  
BTW, der Plural von [Status](http://de.wiktionary.org/wiki/Status) ist Statūs (langes [uː]).  
  

> was 200 Farben entspricht. Ich sollte also für diese zweihundert Farben Klassen anlegen, und diese später zu refernezieren?  
  
Vielleicht nicht.  
  
Bist du sicher, dass Menschen 200 Statūs anhand von Farben unterscheiden können?  
  
Qapla'

-- 
Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)

[Rotzläffel]

hi,

Besser wäre aber

$("td id").clickEvent(){
   this.setClass("red");
}

>   
> Nicht wirklich. Besser wäre, die Klasse nach der Funktion, nicht nach der Darstellung zu benennen. Also danach, was sie repräsentiert, nicht danach, wie sie präsentiert wird.  
  
nun, ihre einzige Funktion wäre ja, eine rote Hintergrundfarbe zu setzen. Vermutlich würde ich das aber nicht über die Farbe, sondern über den Status regeln( class s3) oder sowas.  
  

>   
> > In meiner Applikation verarbeite ich zur Zeit ca. 200 Stati  
>   
> BTW, der Plural von [Status](http://de.wiktionary.org/wiki/Status) ist Statūs (langes [uː]).  
  
ah, wieder was gelernt, das wusste ich nicht.  
  

>   
> > was 200 Farben entspricht. Ich sollte also für diese zweihundert Farben Klassen anlegen, und diese später zu refernezieren?  
>   
> Vielleicht nicht.  
  
Wie würdest du es machen, abgesehen von der folgenden Frage?  
  

>   
> Bist du sicher, dass Menschen 200 Statūs anhand von Farben unterscheiden können?  
  
Das geht, ja. Es handelt sich hier um ein Tool zur Spieleentwicklung, die Leute, die damit arbeiten, müssen sich halt etwas konzentrieren.  
  
  
Noch was: es gibt auch ein DragTool. Damit kann man auf einer Karte draggen. Die x/y-Koordinaten stellen den Drag-Handler (das zu ziehende Feld) immer an der nötigen Position auf einer Map da (position: absolut). Auch hier werden CSS-Eigenschaften direkt über JS gesetzt und nicht über Klassen. Das wäre hier meines Erachtens sogar (fast) unmöglich.  
  
R

[Gunnar Bittersmann]

@@Rotzläffel:

nuqneH

nun, ihre einzige Funktion wäre ja, eine rote Hintergrundfarbe zu setzen.

Das meinte ich nicht.

Was sagt die Klasse (der Status) aus? Bspw.: „Fahstuhltür klemmt.“

Bist du sicher, dass Menschen 200 Statūs anhand von Farben unterscheiden können?

Das geht, ja. Es handelt sich hier um ein Tool zur Spieleentwicklung, die Leute, die damit arbeiten, müssen sich halt etwas konzentrieren.

Fail. Das User-Interface soll die Arbeit erleichtern, nicht erschweren.

Noch was: es gibt auch ein DragTool. […] Das wäre hier meines Erachtens sogar (fast) unmöglich.

Für Applikationen gelten mitunter andere Regeln als für Webseiten. (Wobei der Übergang vom einen zum anderen fließend ist.)

Qapla'

[Rotzläffel]

Gunnar,

Bist du sicher, dass Menschen 200 Statūs anhand von Farben unterscheiden können?

Das geht, ja. Es handelt sich hier um ein Tool zur Spieleentwicklung, die Leute, die damit arbeiten, müssen sich halt etwas konzentrieren.

Fail. Das User-Interface soll die Arbeit erleichtern, nicht erschweren.

was weißt du über das User-interface? Über Entscheidungsprozesse der Geschäftsleitung, um die Historie der Entwicklungsumgebung, über die Arbeitsmethoden? Woher weißt du, dass das Tool Arbeit erschwert? Nichts davon weißt du.

Noch was: es gibt auch ein DragTool. […] Das wäre hier meines Erachtens sogar (fast) unmöglich.

Für Applikationen gelten mitunter andere Regeln als für Webseiten. (Wobei der Übergang vom einen zum anderen fließend ist.)

Fail. Auch eine Website (nicht Webseite), und ist sie auch noch so klein, ist eine Applikation. Deshalb ist die Aussage, man solle CSS-Eigenschaften nicht via JS setzen, elfenbeintürmlerischer Mumpitz und vielleicht zutreffend für Standardanforderungen. Als Pauschalausage nicht haltbar.

[Gunnar Bittersmann]

@@Rotzläffel:

nuqneH

was weißt du über das User-interface?

Das, was du darüber gesagt hast: „die Leute, die damit arbeiten, müssen sich halt etwas konzentrieren.“

Und das hört sich nicht gut an.

Auch eine Website (nicht Webseite), und ist sie auch noch so klein, ist eine Applikation.

Nein.

Qapla'

[ottogal]

Warum nicht [link:http://api.jquery.com/on/@title=on()]? Alte jQuery-Version?

Danke für den Hinweis auf on(). Dazu fand ich diesen guten Artikel:
Differences Between jQuery .bind() vs .live() vs .delegate() vs .on()
Habe jetzt die neueste jQuery-Version...

[ottogal]

Danke für die Anstöße. Dieser Code bewirkt das Gewünschte:

$('#Form #Opt').bind('change keyup',  
function() {  
// tu was  
});  
  
$('#Form #Opt').bind('click',  
function(event) {  
event.stopPropagation();  
});