Estoy haciendo un movimiento de jugador simple en el lienzo de Javascript. (Arriba abajo izquierda derecha)
Creé 4 botones en pantalla para reproductores móviles. Usé el siguiente código para los botones porque quería mover el reproductor hasta que se suelte el botón.
upBtn.addEventListeter('mousedown',()=>{ let interval=setInterval(()=>{ player.y--; }, 50); upBtn.addEventListener('mouseup',()=>{ clearInterval(interval); }); });El código anterior funciona perfectamente cuando se hace clic en los botones en una computadora. Pero en el móvil no funciona.
También traté de usar touchdown y touchup pero no funcionó.
¿Qué cambios debo hacer en el código para que funcione también en dispositivos móviles?
Gracias por adelantado
Estás buscando touchstart y touchend
function upFunc(event) { //prevents some devices to emulate the click event event.preventDefault(); let interval=setInterval(()=>{ player.y--; }, 50); upBtn.addEventListener('mouseup',downFunc); upBtn.addEventListener('touchend',downFunc); } function downFunc(e) { e.preventDefault(); clearInterval(interval); } upBtn.addEventListeter('mousedown', upFunc); upBtn.addEventListeter('touchstart', upFunc);Tenga en cuenta que para admitir tanto el mouse como el toque en vanilla js, deberá agregar ambos detectores de eventos.
Además, algunos dispositivos emulan los eventos del mouse, por lo que puede usar preventDefault() para asegurarse de que sus funciones se activen solo una vez.
Tuve un problema similar y finalmente lo resolví. No recuerdo todos los detalles de cómo llegué al resultado final, pero aquí está el código que finalmente usé para que funcionara. Es para controlar un robot cámara. Al mantener presionada la flecha hacia adelante, el robot se mueve hacia adelante mientras se mantiene presionado el botón y se detiene tan pronto como se suelta el botón. Funciona tanto en navegadores de PC como en navegadores de teléfonos inteligentes. Sin embargo, solo lo he probado en un par de navegadores en Samsung. Utiliza onmousup y onmousedown para la PC, mientras que para el teléfono inteligente es un poco más complicado usar los eventos táctiles.
También es importante oncontextmenu="absorbEvent_()" que evita que aparezca el menú contextual cuando mantienes presionado un botón.
<button id="moveForward" onmousedown="moveForward_onmousedown()" onmouseup="anyMovementButton_onmouseup()" onmouseout="anyMovementButton_onmouseout()" ontouchstart="moveForward_onmousedown()" ontouchend="anyMovementButton_onmouseup()" ontouchmove="anyMovementButton_onmouseout()" ontouchcancel="anyMovementButton_onmouseout()" oncontextmenu="absorbEvent_()"> <svg width="34" height="34"> <polygon points="2,32 17,2 32,32" style="fill:lime;stroke:purple;stroke-width:3;fill-rule:evenodd;"></polygon> </svg> </button> function moveReverse_onmousedown() {startMovement('reverse'); } function moveForward_onmousedown() {startMovement('forward'); } function moveRight_onmousedown() {startMovement('right' ); } function tiltUp_onmousedown() { singleMove('up' ); } function tiltDown_onmousedown() { singleMove('down' ); } function anyMovementButton_onmouseup() {stopMovement();} function anyMovementButton_onmouseout() {stopMovement();} function absorbEvent_(event) { var e = event || window.event; e.preventDefault && e.preventDefault(); e.stopPropagation && e.stopPropagation(); e.cancelBubble = true; e.returnValue = false; return false; }