Ergebnis 1 bis 6 von 6
  1. #1
    Avatar von poncho
    poncho ist offline Mitglied
    registriert
    16-11-2006
    Beiträge
    33

    addEventListener mit dynamischem Aufruf

    Hallo Leute,

    ich möchte einigen Bildern ein mouseover- und mouseout-Event zuweisen. Bei jedem Bild soll dann ein zum jeweiligen Bild passender "Tooltip" kommen.
    Das Problem dabei ist, dass dann bei jedem Bild der Tooltip vom letzten Bild kommt.

    So sieht mein Code aus:

    Code:
    function addcharthandler()
    {
    	var e = document.getElementsByName('pgicon');
    	for(var i = 0; i < e.length; i++)
    	{
    		if(e[i].addEventListener) {
    			// id der Bilder ist "pg_<id>"
    			var id = e[i].id.split('_');
    			// bei mouseover soll showpg(<id>) aufgerufen werden
    			e[i].addEventListener("mouseover", function(){showpg(id[1]);}, false);
    			e[i].addEventListener("mouseout", function(){showpg();}, false);
    		} else {
    			e[i].mouseover = function(){showpg(id[1])};
    			e[i].mouseout = function(){showpg()};
    		}
    	}
    }
    
    function showpg(tid)
    {
    	var e = document.getElementById('pgpopup');
    	if(typeof tid == "undefined" || tid == 0) {
    		e.style.display = 'none';
    	} else {
    		e.innerHTML = 'Wann und wie oft gespielt...<br /><img src="?pg=' + tid + '" alt="Wann und wie oft gespielt..." />';
    		e.style.display = 'block';
    	}
    }
    Wie bekomme ich es nun hin, dass jedes Bild seine eigene ID nutzt und nicht alle die des letzten Bildes?
    Dieser Satz ist falsch!

  2. #2
    Cord Worthmann ist offline Routinier
    registriert
    27-07-2005
    Ort
    27356 Rotenburg
    Beiträge
    418

    AW: addEventListener mit dynamischem Aufruf

    Es handelt sich dabei um ein Referenzierungsproblem, das einer Eigenart Javascripts zugrunde liegt, die ich als Designfehler bezeichnen würde.

    Obwohl Du in der Funktion addcharthandler die Variable id stets neu instanzierst, zeigen alle Handler-Parameter später auf die letzte Instanz dieser Variable.
    Ich vermute mal, dass es damit zusammenhängt, dass dynamische Funtionen erst dann instanziert werden, wenn sie aufgerufen werden. D. h., sie sind bei der Übergabe an addEventListener lediglich Code und noch keine Objekte, wodurch es dann zu dem Referenzierungsproblem kommt.

    Abhilfe kannst Du schaffen, indem Du die Zuweisung der EventHandler in eine separate Funktion auslagerst. Nun steht der wert von id in einem anderen Kontext und wird so übergeben, wie man es erwarten würde.


    Grüsse

  3. #3
    Avatar von poncho
    poncho ist offline Mitglied
    registriert
    16-11-2006
    Beiträge
    33

    AW: addEventListener mit dynamischem Aufruf

    Klingt logisch aber das Resultat bleibt leider das gleiche.

    Code:
    function addcharthandler()
    {
    	var e = document.getElementsByName('pgicon');
    	for(var i = 0; i < e.length; i++)
    	{
    		var id = e[i].id.split('_');
    		addEvent(e[i], 'mouseover', function(){showpg(id[1]);}, false);
    		addEvent(e[i], 'mouseout', function(){showpg();}, false);
    	}
    }
    
    
    // Quelle: http://www.mediaevent.de/javascript/event_listener.html
    function addEvent(obj, eventType, fn, useCaption)
    {
    	if (obj.addEventListener) {
    		obj.addEventListener(eventType, fn, useCaption);
    		return true;
    	} else if (obj.attachEvent) {
    		var retVal = object.attachEvent("on"+eventType, fn);
    		return retVal;
    	} else {
    		return false;
    	}
    }
    Oder meinst du es noch anders?
    Dieser Satz ist falsch!

  4. #4
    Cord Worthmann ist offline Routinier
    registriert
    27-07-2005
    Ort
    27356 Rotenburg
    Beiträge
    418

    AW: addEventListener mit dynamischem Aufruf

    Nein, so bleibt die Zuweisung ja immer noch im Kontext der Schleife. Ich dachte eher an etwas in dieser Art...

    Code:
    function addcharthandler()
    {
    	var e = document.getElementsByName('pgicon');
    	for (var i = 0; i < e.length; i++)
    	{
    		addEvent(e[i], 'mouseover', e[i].id.split('_')[1]);
    		addEvent(e[i], 'mouseout');
    	}
    }
    
    
    function addEvent(obj, type, id)
    {
            var fn = function() { showpg(id) };
    	if (obj.addEventListener) {
    		obj.addEventListener(type, fn, false);
    	} else if (obj.attachEvent) {
    		obj.attachEvent('on' + type, fn);
    	} else {
                    obj['on' + type] = fn;
            }
    }
    Das sollte so funktionieren.


    Grüsse

  5. #5
    Avatar von poncho
    poncho ist offline Mitglied
    registriert
    16-11-2006
    Beiträge
    33

    AW: addEventListener mit dynamischem Aufruf

    Ist zwar nicht so toll, dass man extra dafür eine Funktion braucht aber egal, Hauptsache es geht und das tut es jetzt

    Danke
    Dieser Satz ist falsch!

  6. #6
    Cord Worthmann ist offline Routinier
    registriert
    27-07-2005
    Ort
    27356 Rotenburg
    Beiträge
    418

    AW: addEventListener mit dynamischem Aufruf

    Gerngeschehen!

    Ich hatte dieses Problem dereinst selber, und es hat damals 'ne ganze Weile gedauert, bis ich die Ursache gefunden hatte, da Geschichte in wesentlich komplexerem Zusammenhang stand...

Ähnliche Themen

  1. Problem mit dynamischem "Text_aus_PHP_laden"
    Von Yooda im Forum JavaScript
    Antworten: 13
    Letzter Beitrag: 12-05-2006, 14:09
  2. Adresse in exec aufruf
    Von tux_muc im Forum Serverseitige Programmierung
    Antworten: 4
    Letzter Beitrag: 21-04-2006, 13:09
  3. wie muss der aufruf im <input> lauten?
    Von tux_muc im Forum JavaScript
    Antworten: 10
    Letzter Beitrag: 19-04-2006, 17:08
  4. Antworten: 0
    Letzter Beitrag: 03-01-2002, 00:09

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •