EventListener reagiert nur einmal und nur bei keypress

[Phil]

Hallo.

Ich habe ein input Feld mit einer Autosuggest Funktion welche die Ergebnisse aus der Datenbank in eine Liste(ul) schreibt.
Dann habe ich ein Skript welches auf Tastatureingaben reagiert womit ich dann durch die Ergebnisse navigieren kann. Das klappt auch super, auch das qnwählen und richtige reagieren.
Allerdings klappt das navigieren nur einmal bis ich etwas ausgewählt habe und nur durch drücken der Enter-Taste und nicht durch den Mausklick - es soll aber beides möglich sein und falls man doch was an der Suchphrase ändert soll man durch neue Vorschläge ebenfalls navigieren können. Das geht erst nach dem Neuladen der Seite.

Woran liegt das?

  
<input type='text' id='Category'  name='category' />  
<ul id='Categories'></ul>  
<script type='text/javascript'>  
addEvent(document, 'keypress', activateChoose); // Ergebnis auswählen mit Enter  
addEvent(document, 'click', activateChoose); // Ergebnis auswählen mit Maus  
addEvent(document, 'keypress', chooseCategory); // Navigieren  
addEvent(document.getElementById('Category'), 'keyup', showCats); // Vorschläge machen  
</script>  

  
  
function addEvent (obj, type, fn) {  
   if (obj.addEventListener) {  
      obj.addEventListener(type, fn, false);  
   } else if (obj.attachEvent) {  
      obj.attachEvent('on' + type, function () {  
         return fn.call(obj, window.event);  
      });  
   }  
}  
  
var curElement=null;  
  
// Durch Vorschläge navigieren mit Pfeiltasten und bei Enter auswählen  
function chooseCategory(e){  
	naviElement=document.getElementById('Category');  
	catElement=document.getElementById('Categories');  
	var key=e.keyCode;  
	switch(key){	  
		case 38:  
			if(curElement && curElement.previousSibling) {  
				curElement.removeAttribute('class');  
				curElement = curElement.previousSibling;  
			}  
		break;  
		case 40:  
			if(curElement) {  
				if(curElement.nextSibling) {  
					curElement.removeAttribute('class');  
					curElement = curElement.nextSibling;  
				}  
			} else {  
				curElement = catElement.firstChild;  
			}  
		break;  
		case 13:  
			if(curElement) {  
				activateChoose(curElement);  
				return;  
			}  
		break;  
		default: return;break;  
	}  
        // Das ausgewählte Element bekommt eine andere CSS-Klasse  
	curElement.className='actC';  
}  
  
// Vorschlag auswählen und passend reagieren  
function activateChoose(e){  
	f=(!e)?this:e;  
	if(f.parentNode==document.getElementById('Categories')){  
		/* Reaktionen wenn es ausgewählz wurde, der übersichtlichkeit mal rausgelassen - sind nur CSS Veränderungen(Farbe des Inputsfeldes z.B.!*/  
	}  
  
}  
  

Ich glaube ich weiß wo der Fehler liegt und zwar bei:
addEvent(document, 'click', activateChoose);

Er bräuchte irgendwie document.getElementById('Categories').childNodes
aber das funktioniert nicht =/

Lg, Phil

[LX]

Verwende bubbling und e.target (das Ziel des Events), um das geklickte Children zu bekommen.

Gruß, LX

[Gunnar Bittersmann]

@@LX:

nuqneH

um das geklickte Children zu bekommen.

Kind! Das Singular lautet „child“.

Qapla'

[LX]

Du hast natürlich fast Recht: es fehlte das Wort "der", gemeint war "das Geklickte der Children".

Gruß, LX

[Gunnar Bittersmann]

@@LX:

nuqneH

Du hast natürlich fast Recht: es fehlte das Wort "der", gemeint war "das Geklickte der Children".

*G* Schön rausgeredet.

Qapla'

[Beat]

@@LX:
nuqneH

Du hast natürlich fast Recht: es fehlte das Wort "der", gemeint war "das Geklickte der Children".
*G* Schön rausgeredet.

*gggggggg(wasnjetlos)gggggggg*

mfg Beat

[LX]

Kompliment vielmals dankend zur Kenntnis genommen.

Gruß, LX

[phil]

Verwende bubbling und e.target (das Ziel des Events), um das geklickte Children zu bekommen.

Gut das mit dem target hatte ich völlig vercheckt, ebenso natürlich auch srcElement. Sowohl Maus als auch Tastatur usw funktionieren jetzt. Allerdings immer noch nur einmal.

Das mit dem Bubbling leuchtet mir gerade trotz Molily nicht ganz ein.
Also ich verstehe was Bubbling ist, zumindestens so wie es dort erklärt wird aber ich sehe gerade nicht den Lösungsansatz für mein Problem.

Lg, phil

[phil]

Das mit dem Bubbling leuchtet mir gerade trotz Molily nicht ganz ein.
Also ich verstehe was Bubbling ist, zumindestens so wie es dort erklärt wird aber ich sehe gerade nicht den Lösungsansatz für mein Problem.

Kann mir denn keiner mehr ein paar Hilfestellungen geben?

Lg, phil

[phil]

Kann mir denn keiner mehr ein paar Hilfestellungen geben?

Pleaaaaaaaassee!!!

[Don P]

Hallo,

Pleaaaaaaaassee!!!

Mann, quengel' doch nicht so...

Sowohl Maus als auch Tastatur usw funktionieren jetzt. Allerdings immer noch nur einmal.

Soso, und nun? Soll man erraten wie dein Code inzwischen aussieht?

[...] aber ich sehe gerade nicht den Lösungsansatz für mein Problem.

Der sieht so aus:
Finde heraus, was beim zweiten mal anders läuft als beim ersten mal. Irgendwas muss ja wohl anders sein. Konsultier zu diesem Zweck die Fehlerkonsole, den Firebug, alerts an den verdächtigen Stellen, in dieser Reihenfolge.

Gruß, Don P

[phil]

Sowohl Maus als auch Tastatur usw funktionieren jetzt. Allerdings immer noch nur einmal.

Soso, und nun? Soll man erraten wie dein Code inzwischen aussieht?

Der Code hat sich nicht verändert ausser das nun über e.target || e.srcElement
zugegriffen wird, somit funktioniert das ganze.
Allerdings immernoch nur einmal.

Finde heraus, was beim zweiten mal anders läuft als beim ersten mal. Irgendwas muss ja wohl anders sein. Konsultier zu diesem Zweck die Fehlerkonsole, den Firebug, alerts an den verdächtigen Stellen, in dieser Reihenfolge.

Firebug, Fehlerkonsole und Co sagen mir nichts.
Ich habe den Tipp Event Bubbling bekommen und trotz der Auseinandersetzung mit Moliliys Tutorial/Hilfe immernoch nicht die Lösung.

[Don P]

Hallo,

Hast du jetzt herausgefunden, was beim zweiten mal anders läuft? Wenn nein, warum nicht?

Firebug, Fehlerkonsole und Co sagen mir nichts.

Sagen sie nichts oder sagen sie nur *dir* nichts, weil du nicht weißt, was das ist? Google weiß es.

Mit alert() kannst du auch nichts anfangen? Damit kann man Variablen zur Laufzeit anzeigen lassen um zu sehen, ob sie das enthalten, was sie sollen. Ein alert am Anfang einer Funktion z.B. sagt dir, ob die Funktion überhaupt aufgerufen wird, usw. Sowas nennt man Fehlersuche bzw. Debugging.

Ich habe den Tipp Event Bubbling bekommen und trotz der Auseinandersetzung mit Moliliys Tutorial/Hilfe immernoch nicht die Lösung.

Ich auch nicht. Habe noch weniger Lust als du, sie zu suchen.

Gruß, Don P

[phil]

Sagen sie nichts oder sagen sie nur *dir* nichts, weil du nicht weißt, was das ist? Google weiß es.

Echt? Das ist echt eine Neuigkeit - Google kann mir helfen? Muss ich da ne Support-Mail hinschreiben oder doch lieber an http://lmgtfy.com/?

Wenn ich sage das sie nichts sagen, dann heißt das wohl das mir kein Fehler ausgegeben wird. Was ist das bitte für eine bescheuerte Aussage? Willst du helfen oder provozieren?

Mit alert() kannst du auch nichts anfangen? Damit kann man Variablen zur Laufzeit anzeigen lassen um zu sehen, ob sie das enthalten, was sie sollen. Ein alert am Anfang einer Funktion z.B. sagt dir, ob die Funktion überhaupt aufgerufen wird, usw. Sowas nennt man Fehlersuche bzw. Debugging.

Die Funktion wird aufgerufen. Die Variablen haben Werte, ich wiederhole es gerne ein x-tes mal: Ich weiß nicht wie ich mit Event-Bubbling umgehen sollte in diesem Fall. Worauf sollte ich achten usw..

[Don P]

Hallo,

Wenn ich sage das sie nichts sagen,

Du sagtest aber, dass sie *dir* nichts sagen, Zitat:

Firebug, Fehlerkonsole und Co sagen mir nichts.

"sagt mir nichts" heißt meistens soviel wie "keine Ahnung, vovon du redest", oder etwa nicht?

Willst du helfen oder provozieren?

Beides. Helfen ist aber anscheinend nicht möglich, da du keine zielführenden Informationen lieferst. Es ist sicher kein Zufall, dass dir auch sonst keiner antwortet.

Die Funktion wird aufgerufen. Die Variablen haben Werte, ich wiederhole es gerne ein x-tes mal: Ich weiß nicht wie ich mit Event-Bubbling umgehen sollte in diesem Fall.

Dann hast du Event-Bubbling anscheinend nicht richtig verstanden. Leider sagst du auch nicht, *was* dir dabei unklar ist in diesem Fall.

Worauf sollte ich achten usw..

Ich sage es gerne auch ein x-tes mal: Du solltest darauf achten, dass die Variablen das enthalten, was sie sollen und auch zu dem Zeitpunkt, wenn sie es sollen, z.B. beim zweiten Versuch, wenn es nicht mehr so tut wie vorgesehen, falls du überhaupt weißt, was du vorgesehen hast.

Also was passiert denn statt dessen? Im Einzelnen, meine ich. Eine Aussage wie "geht nur einmal" sagt gar nichts aus. *Was* zum Geier passiert denn beim zweiten mal? Im Einzelnen, meine ich. Dieser Frage solltest du nachgehen. Wenn du soweit bist, bist du auch an der Lösung.

Mehr kann ich dir auch nicht sagen. Verstehe deinen Code nicht wirklich und würde das ganz anders machen (frag' nicht wie, eben gaaanz anders).
Was mir z.B. seltsam vorkommt ist, dass du zwei Funktionen an keypress hängst:

addEvent(document, 'keypress', activateChoose); // Ergebnis auswählen mit Enter
[...]
addEvent(document, 'keypress', chooseCategory); // Navigieren

Da würde doch eine reichen Funktion, die dann je nach Taste entscheidet, was getan werden soll.

Viel Glück, Don P

[phil]

Es wurden mir keine Fehler ausgegeben.
Aber das Problem ist gelöst.
Ich musste curElement sobald ich wieder zum Formular gewechselt habe wieder auf null zurücksetzen. D.h. bei Keycode 8 oder 46 (Backspace oder Entf) curElement=null.

Lg, Phil