如何在Javascript中映射移动触摸事件以模拟向上/向下按键?
我有两个类似按钮的div元素,我想映射到键盘上的左右箭头键如何在Javascript中映射移动触摸事件以模拟向上/向下按键?,javascript,touch-event,Javascript,Touch Event,我有两个类似按钮的div元素,我想映射到键盘上的左右箭头键 <div id="leftBtn" ontouchstart="simKeyDown(event, LEFT_KEYCODE);" ontouchend="simKeyUp(event, LEFT_KEYCODE);" onmspointerup="simKeyUp(event, LEFT_KEYCODE);" onmspointerdown=&quo
<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>
我在最后一个要将触摸事件映射到按键的功能中卡住了。任何帮助或指导都将不胜感激。我也愿意接受其他实现方法。如果按下左/右键,您可以使用两个变量来跟踪。基于此,您可以在画布渲染动画方法中检查这些值,以处理必要的操作。 例如: 无论何时调用keyUp或keyDown方法,都可以将变量更新为true/false
//Key codes for simulating key events
var LEFT_KEYCODE = 37; //Left cursor key
var RIGHT_KEYCODE = 39; //Right cursor key
var LEFT_KEY_PRESSED = false;
var RIGHT_KEY_PRESSED = false;
//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) {
if (eventType === 'KeyUp') {
if (keyCode == LEFT_KEYCODE) {
LEFT_KEY_PRESSED = true
}
if (keyCode == RIGHT_KEYCODE) {
RIGHT_KEY_PRESSED = true
}
}
if (eventType === 'KeyDown') {
if (keyCode == LEFT_KEYCODE) {
LEFT_KEY_PRESSED = false
}
if (keyCode == RIGHT_KEYCODE) {
RIGHT_KEY_PRESSED = false
}
}
}
如果您有任何requestframe方法或动画方法,您可以检查这些值并执行所需的更新例如:
假设您只是想将击键发送到页面上的文本表单或类似的表单,请查看以下线程:您不能将按键发送到操作系统。我不会将其发送到输入字段。左键和右键将控制画布元素。可能是这样?
var LEFT_KEY_PRESSED = false;
var RIGHT_KEY_PRESSED = false;
//Key codes for simulating key events
var LEFT_KEYCODE = 37; //Left cursor key
var RIGHT_KEYCODE = 39; //Right cursor key
var LEFT_KEY_PRESSED = false;
var RIGHT_KEY_PRESSED = false;
//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) {
if (eventType === 'KeyUp') {
if (keyCode == LEFT_KEYCODE) {
LEFT_KEY_PRESSED = true
}
if (keyCode == RIGHT_KEYCODE) {
RIGHT_KEY_PRESSED = true
}
}
if (eventType === 'KeyDown') {
if (keyCode == LEFT_KEYCODE) {
LEFT_KEY_PRESSED = false
}
if (keyCode == RIGHT_KEYCODE) {
RIGHT_KEY_PRESSED = false
}
}
}
function animate() {
if (LEFT_KEY_PRESSED ) {
player.left++
}
if (RIGHT_KEY_PRESSED ) {
player.right++
}
}