Ich möchte Mausereignisse auf zwei Ebenen erfassen: PIXIs Leinwand und und überlagerndes div. Ich habe die folgende Art von HTML-Setup, wobei div.overlay über canvas.pixi :
PIXI-Interaktion funktioniert gut, wenn canvas oben ist, aber ich kann keine Ereignisse erfassen, wenn die Zeichenfläche mit div.overlay überlagert ist.
Ich habe setTargetElement gefunden, mit denen wir das DOM-Element für Capture-Elemente definieren können, und ich habe versucht, es so zu verwenden:
Mit dieser Technik kann ich mousemove -Ereignisse erfassen, aber leider funktionieren click , mousedown , usw. nicht.
Ich habe auch versucht, die ursprünglichen Ereignisse zu kopieren, die auf div.overlay aufgenommen wurden, und dupliziere die Ereignisse auf canvas , wie unten gezeigt, aber das macht auch keinen Sinn.
Gibt es eine Möglichkeit, Mausereignisse auf einem überlagerten DOM-Element zu erfassen und die Ereignisse an PIXI zu übergeben?
Warum?
Ich würde gerne mit PIXI-Elementen interagieren und gleichzeitig die Zoom- und Pinsel-Funktionen von D3 nutzen, die derzeit auf dem überlagernden div behandelt werden.
Aktualisierung & amp; Codebeispiel
Ich habe es geschafft, Ereignisse weiterzuleiten und alle, außer Klickereignisse, werden von PIXI registriert. Klick-Ereignisse können manuell ausgelöst werden, indem die Ereignisse pointerdown und pointerup erneut ausgelöst werden. Besuche Ссылка
Ich habe es für mouseover , mouseout , mousedown , mouseup und click ausgelöst, indem ich die Ereignisse geklont habe und click -Ereignisse von mousedown und mouseup -Ereignissen rekonstruiert habe. Alle außer click -Ereignisse funktionieren beim Klonen von Ereignissen aus der Ereignisschicht standardmäßig, aber Klickereignisse werden nicht ausgelöst.
Also die folgende HTML-Struktur gegeben:
%Vor%Ich höre mir eine Reihe von Ereignissen an:
%Vor%Und dann Weiterleiten / Klonen der Ereignisse:
%Vor%Das Ereignis kann auch an anderer Stelle ausgelöst werden, z. B. von D3 erkannt werden.
Demo : Ссылка
Die obere linke Ecke zeigt, wie es funktioniert, wenn Sie Ereignisse direkt mit PIXI abfangen. Oben rechts zeigt das Problem beim Klonen von Ereignissen. Unten links zeigt ein merkwürdiges Verhalten, bei dem das erneute Auslösen der gleichen Ereignisse dazu führt, dass PIXI Klickereignisse erkennt und schließlich unten rechts.
Eine mögliche Lösung besteht darin, alle Ereignisse am Elternelement zu erfassen und sie zurück zu den untergeordneten Elementen zu verschieben. So was. Dies geschieht für den Klick, funktioniert auch für mousevove.
Das Problem ist, dass das DOM hierarchisch ist. Hier ist ein altes Problem über genau die gleiche Sache . Es stellt sich heraus, dass Sie Ereignisse nicht einfach auf Geschwister übertragen können, nur Eltern und Kinder. Ich würde vorschlagen, Ihre canvas in die .overlay zu setzen, dann können Sie sie sowohl erfassen als auch in der Bubbling-Phase abfangen, je nachdem, ob Sie mit denen vor oder nach der Zeichenfläche umgehen möchten.
Ich denke, das unten sollte wie erwartet funktionieren.
HTML:
%Vor%Beispiel JS:
%Vor%Tags und Links javascript mouseevent pixi.js