Estoy tratando de permitir dibujar usando el toque en el lienzo HTML, pero desplaza la ventana cuando intento dibujar. Intenté usar preventDefault() en las funciones de eventos, pero aparece el error: No se puede prevenirDefault dentro de la invocación pasiva del detector de eventos.
Mi componente de lienzo se parece a:
const drawStart = (e) => { const { offsetX, offsetY } = e.nativeEvent contextRef.current.beginPath() contextRef.current.moveTo(offsetX, offsetY) contextRef.current.lineTo(offsetX, offsetY) contextRef.current.stroke() setDrawing(true) } const drawEnd = () => { contextRef.current.closePath() setDrawing(false) } const draw = (e) => { e.preventDefault() if (!drawing) { return } const { offsetX, offsetY } = e.nativeEvent contextRef.current.lineTo(offsetX, offsetY) contextRef.current.stroke() } return ( <canvas onMouseDown={drawStart} onTouchStart={drawStart} onMouseUp={drawEnd} onTouchEnd={drawEnd} onMouseMove={draw} onTouchMove={draw} ref={canvasRef} /> )Este componente funciona perfectamente cuando se usa la funcionalidad del mouse en dispositivos que no son móviles.
Puede probar sin acciones touch , aquí hay una refactorización del código de canvas que usa eventos de pointer y una regla de estilo para deshabilitar las acciones touch :
<canvas onPointerDown={drawStart} onPointerUp={drawEnd} onPointerMove={draw} ref={canvasRef} style={{ touchAction: none }} />