✔ Callback in Funktion mit Switch

[Jan-Frederik Stieler]

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.

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

 

[Sempervivum]

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:

        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]

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]

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.

 

[Jan-Frederik Stieler]

Macht es eigentlich einen Unterschied ob ich die Callback Funktion vor dem Switch aufrufe, oder in jedem Case, auch wenns dann redundant ist?

 

[Sempervivum]

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]

Ah cool, stimmt an die Callback Funktion kann ich ja auch wieder Parameter übergeben.
Aber das kann ja wirklich im Funktions-Dschungel enden .
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.