I have two button-like div elements that I would like to map to the left & right arrow keys on a keyboard.
<div id="leftBtn" ontouchstart="simKeyDown(event, LEFT_KEYCODE);" ontouchend="simKeyUp(event, LEFT_KEYCODE);" onmspointerup="simKeyUp(event, LEFT_KEYCODE);" onmspointerdown="simKeyDown(event, LEFT_KEYCODE);"><img src="../images/left.png"></div>
<div id="rightBtn" ontouchstart="simKeyDown(event, RIGHT_KEYCODE);" ontouchend="simKeyUp(event, RIGHT_KEYCODE);" onmspointerup="simKeyUp(event, RIGHT_KEYCODE);" onmspointerdown="simKeyDown(event, RIGHT_KEYCODE);"><img src="../images/right.png"></div>
Then in my Javascript I have:
//Key codes for simulating key events
var LEFT_KEYCODE = 37; //Left cursor key
var RIGHT_KEYCODE = 39; //Right cursor key
//Simulate a key up event
function simKeyUp(e, keyCode) {
//Suppress the default action
e.preventDefault();
//Send the event as a key up event
queueKeyboardEvent('KeyUp', keyCode);
}
//Simulate a key down event
function simKeyDown(e, keyCode) {
//Suppress the default action
e.preventDefault();
//Send the event as a key down event
queueKeyboardEvent('KeyDown', keyCode);
}
function queueKeyboardEvent(eventType, keyCode) {
**something goes here**
}
I am stuck at the last function where I want to map the touch event to the key press. Any help or direction would be greatly appreciated. I'm also open to other ways of implementing.
from How can I map mobile touch events to simulate key press up/down in Javascript?
No comments:
Post a Comment