시뮬레이션이 작동하지 않는 키를 클릭

Question

나는 스마트 폰에서의 동작을 위해 WASD를 시뮬레이션하려고합니다. 스마트 폰의 버튼을 클릭하면 해당 버튼이 작동하지만 멈추지 않습니다.

단추를 놓을 때 프로그램이 멈추도록하려면 어떻게해야합니까? 키 업과 같은 것이 있거나 더 좋은 아이디어가 있습니까? 당신이하지 않았기 때문에

  <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

당신의 HTML이 필요로 어떻게 확신 할 수없는이 변경 될 :

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); 
    } 
} 

이

은 버튼을 트리거 온 다운 (on-down) 속성이 연결되는 방법에 대한 정보 포함 o 당신의 이벤트 핸들러 - 이것이 Javascript 프레임 워크 일종의 것 같아 보인다.

문제,하지만 당신은을 누르면 한 번, 그래서 당신이 이을 눌러야 키를 알려주는 일정이 있는데 하나는 다시을 발표 할 키를 이야기하지 않아도 명확하게 버튼을 누르면 브라우저는 기본적으로 키가 영원히 눌려 졌다고 생각합니다. 다시 나는이를 테스트 할 수 있지만

해결책은, 다음과 같이 보일 것입니다 :

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> 
<!-- ... --> 

그래서이 당신의 프레임 워크에서 다운과 같은 방식으로 작동하는 - 최대 속성을 지원한다고 가정합니다. 단추를 누르면 keydown 이벤트가 트리거되고, 단추를 다시 눌렀을 때 keyup 이벤트가 트리거됩니다.