Callback in Funktion mit Switch

Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

Jan-Frederik Stieler

Monsterator
Moderator
Hallo,

wie bekomm ich den bei dieser Funktion ein Callback hin ohne das der Callback direkt automatisch ausgeführt wird?
Wenn ich den Callback in die onpointerdown Funktion übernehme bekomme ich eine Fehlermeldung.

Javascript:
function pointerDown(element, callback){
    element.onpointerdown = function(event) {
        switch ( event.button ) {
            case 0:
                THREE.MOUSE.ROTATE;
                console.log("Left Button is down.");
                break;
            case 1:
                THREE.MOUSE.DOLLY;
                console.log("Middle Button is down.");
                break;
            case 2:
                THREE.MOUSE.PAN;
                element.addEventListener('contextmenu', event => event.preventDefault());
                console.log("Right Button is down.");
                break;
        }
    }
    callback();
}

//ControlItems
let controlItems = document.querySelectorAll('.tooltip');

controlItems.forEach(ctrlItem => {
    pointerDown(ctrlItem, function(){
         console.log('modelbtn clicked');
    });
    pointerEnter(ctrlItem);
    pointerLeave(ctrlItem);
});

JS Bin

Grüße
 
Zuletzt bearbeitet:

Sempervivum

Erfahrenes Mitglied
Da musste ich jetzt eine ganze Weile suchen.
Stackoverflow:
How to pass arguments to addEventListener listener function?
hat dann den entscheidenden Hinweis gebracht, dass man mit bind zusätzliche Parameter an die Handlerfunktion übergeben kann:
Code:
        function pointerDown(element, callback) {
            element.onpointerdown = function () {
                console.log(event);
                callback();
                switch (event.button) {
                    case 0:
                        // THREE.MOUSE.ROTATE;
                        console.log("Left Button is down.");
                        break;
                    case 1:
                        // THREE.MOUSE.DOLLY;
                        console.log("Middle Button is down.");
                        break;
                    case 2:
                        // THREE.MOUSE.PAN;
                        element.addEventListener('contextmenu', event => event.preventDefault());
                        console.log("Right Button is down.");
                        break;
                }
            }.bind(null, event, callback);
        }
Warum die Argumente der Funktion pointerDown nicht im Eventhandler verfügbar sind hat sich mir aber nicht erschlossen.
 

Jan-Frederik Stieler

Monsterator
Moderator
Hi,
cool Danke!
Hatte mich auch schon totgesucht gehabt und nichts wirklich gefunden außer mit promise. Aber das kam mir irgendwie zu kompliziert vor.Nur wenn ich versuche aus der Doku zu verstehen was .bind macht bekomm ich einen Knoten im Kopf.
Also es übergibt die Funktion mit this an den ersten Paramter und hängt dann die neuen an dieses this dran oder hab ich das falsch verstanden?

Gruß
 

Sempervivum

Erfahrenes Mitglied
Ja, den ersten Parameter findet die Funktion dann als this vor und die anderen folgen danach. Und weil wir this an der Stelle nicht brauchen, wird null übergeben.
Knoten im Kopf bei mir übrigens auch, aber so einiger Maßen verstehe ist jetzt, wofür dieses bind gut ist.
 

Sempervivum

Erfahrenes Mitglied
Das hängt wahrscheinlich davon ab, was Du damit vor hast. Wenn die Aktionen in dieser Funktion immer die selben sind, kannst Du sie vor dem Switch aufrufen. Möglicher Weise willst Du aber, parametergesteuert, unterschiedliche Aktionen ausführen, dann müsstest Du sie im case aufrufen.
 

Jan-Frederik Stieler

Monsterator
Moderator
Ah cool, stimmt an die Callback Funktion kann ich ja auch wieder Parameter übergeben.
Aber das kann ja wirklich im Funktions-Dschungel enden :D .
Ich will in dem Fall jetzt nur Modelnamen für Three.js übergeben um unterschiedliche Modelle laden zu können. Wollte aber jetzt nicht nochmal komplett neue Funktionen für die Buttons schreiben welche dann mit den anderen Redundant wären.
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

Neue Beiträge