Simuler en cliquant sur une touche ne fonctionne pas

Question

J'essaye de simuler WASD pour le mouvement sur un smartphone. Lorsque je clique sur le bouton d'un smartphone, il déclenche ce bouton mais ne s'arrête jamais.

Comment puis-je arrêter le programme lorsque vous relâchez le bouton? Y at-il quelque chose comme keyup nécessaire ou quelqu'un a une meilleure idée?

function fireKey(el, key) { 
    if (document.createEventObject) { 
     var eventObj = document.createEventObject(); 
     eventObj.keyCode = key; 
     el.fireEvent("onkeydown", eventObj); 
    } else if (document.createEvent) { 
     var eventObj = document.createEvent("Events"); 
     eventObj.initEvent("keydown", true, true); 
     eventObj.which = key; 
     eventObj.keyCode = key; 
     el.dispatchEvent(eventObj); 
    } 
} 

Cela déclenche les boutons:

  <paper-button data-key="LEFT" on-down="handleButton"> 
       <iron-icon data-key="LEFT" icon="hardware:keyboard-arrow-left" style="color: white;"></iron-icon> 
      </paper-button> 
      <paper-button data-key="RIGHT" on-down="handleButton"> 
       <iron-icon data-key="RIGHT" icon="hardware:keyboard-arrow-right" style="color: white;"></iron-icon> 
      </paper-button> <br/> 

      <paper-button data-key="DOWN" on-down="handleButton"> 
       <iron-icon data-key="DOWN" icon="hardware:keyboard-arrow-down" style="color: white;"></iron-icon> 
      </paper-button> 

It's from this example.

Answer 1

Je ne peux pas être certain comment votre HTML doit être changé parce que vous ne l'avez pas inclure des informations sur la façon dont votre attribut on-down est accroché t o votre gestionnaire d'événements - il semble que cela doit être une sorte de framework Javascript.

Le problème, cependant, est clairement que vous avez un événement qui indique à votre clé pour être pressé , mais vous n'avez pas un dit la clé pour être à nouveau libéré , donc une fois que vous avez appuyé sur la touche bouton une fois que votre navigateur va simplement penser que la clé est enfoncée pour toujours.

Une solution ressemblerait à quelque chose comme ça, mais encore une fois je ne pouvais pas tester ceci:

function pressKey(el, key) { 
    fireKeyEvent(el, key, "keydown"); 
} 

function releaseKey(el, key) { 
    fireKeyEvent(el, key, "keyup" 
} 

function fireKeyEvent(el, key, eventName) { 
    if (document.createEventObject) { 
     var eventObj = document.createEventObject(); 
     eventObj.keyCode = key; 
     el.fireEvent("on" + eventName, eventObj); 
    } else if (document.createEvent) { 
     var eventObj = document.createEvent("Events"); 
     eventObj.initEvent(eventName, true, true); 
     eventObj.which = key; 
     eventObj.keyCode = key; 
     el.dispatchEvent(eventObj); 
    } 
} 

<paper-button data-key="LEFT" on-down="pressKey" on-up="releaseKey"> 
    <iron-icon data-key="LEFT" icon="hardware:keyboard-arrow-left" style="color: white;"></iron-icon> 
</paper-button> 
<!-- ... --> 

Donc, cela suppose que votre cadre prend en charge un attribut sur-up qui fonctionne de la même manière que sur le bas. Cela déclencherait un événement keydown lorsque le bouton est enfoncé et un événement de keyup lorsque le bouton est relâché.