Kann nicht klicken, um ein Canvas in einem IFrame mit Pixi.js zu fokussieren

Ich baue ein Webspiel mit Pixi.js und es erfordert Tastatureingabe. Das Problem ist, wenn ich mein Spiel hochlade, wird es in einem IFrame dargestellt und dies scheint das Klicken auf die Leinwand zu deaktivieren, um den Fokus zu geben. Wenn Sie irgendwo anders im IFrame klicken, aber auf die Zeichenfläche, erhält der Rahmen den Fokus und erhält Tastaturereignisse.Kann nicht klicken, um ein Canvas in einem IFrame mit Pixi.js zu fokussieren

Ich verstehe nicht, was vor sich geht. Wie kann ich dieses Verhalten umgehen?

In diesem Beispiel werden die Pfeiltasten verwendet.

<!doctype html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <style>* {padding: 0; margin: 0}</style> 
 
    </head> 
 
    <body> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.js"></script> 
 
     <script> 
 
      //Create the renderer 
 
      var renderer = PIXI.autoDetectRenderer(256, 256); 
 
      
 
      //Add the canvas to the HTML document 
 
      document.body.appendChild(renderer.view); 
 
      
 
      //Create a container object called the `stage` 
 
      var stage = new PIXI.Container(); 
 
      
 
      //Tell the `renderer` to `render` the `stage` 
 
      renderer.render(stage); 
 
      
 
      // Keys 
 
      function keyboard(keyCode) { 
 
       var key = {}; 
 
       key.code = keyCode; 
 
       key.isDown = false; 
 
       key.isUp = true; 
 
       key.press = undefined; 
 
       key.release = undefined; 
 
       //The `downHandler` 
 
       key.downHandler = function(event) { 
 
        if (event.keyCode === key.code) { 
 
         if (key.isUp && key.press) key.press(); 
 
         key.isDown = true; 
 
         key.isUp = false; 
 
        } 
 
        event.preventDefault(); 
 
       }; 
 
       
 
       //The `upHandler` 
 
       key.upHandler = function(event) { 
 
        if (event.keyCode === key.code) { 
 
         if (key.isDown && key.release) key.release(); 
 
         key.isDown = false; 
 
         key.isUp = true; 
 
        } 
 
        event.preventDefault(); 
 
       }; 
 
       
 
       //Attach event listeners 
 
       window.addEventListener(
 
             "keydown", key.downHandler.bind(key), false 
 
             ); 
 
       window.addEventListener(
 
             "keyup", key.upHandler.bind(key), false 
 
             ); 
 
       return key; 
 
      } 
 
      
 
      var left = keyboard(37), 
 
       up = keyboard(38), 
 
       right = keyboard(39), 
 
       down = keyboard(40); 
 
       
 
      left.press = function() { renderer.backgroundColor = 0x364669; renderer.render(stage); } 
 
      up.press = function() { renderer.backgroundColor = 0xffffff; renderer.render(stage); } 
 
      right.press = function() { renderer.backgroundColor = 0x000000; renderer.render(stage); } 
 
      down.press = function() { renderer.backgroundColor = 0xff4600; renderer.render(stage); } 
 
      
 
      
 
     </script> 
 
    </body> 
 
</html>

Quelle

2017-11-17 Jay

habe ich so etwas wie dieses:

this.app = new PIXI.Application(width, height, { backgroundColor, resolution, antialias }); 
app.renderer.view.addEventListener('mousewheel',() => { 
    if (window.parent === window) { 
     window.focus(); 
    } 
});

Sehen als die Leinwand touch-action das Ereignis mit JavaScript preventDefault() oder ähnlich heißt CSS ist blockiert.

Quelle

2017-12-19 16:30:16 marksyzm

Ich bin mir nicht sicher, wie das funktionieren soll. Ich habe versucht, den Event-Listener dem Renderer im obigen Snippet hinzuzufügen. Die Ergebnisse sind die gleichen, Sie können das schwarze Quadrat nur durch Klicken auf den grauen oder weißen Rahmen fokussieren. – Jay

Kann nicht klicken, um ein Canvas in einem IFrame mit Pixi.js zu fokussieren

Antwort

Verwandte Themen