Tengo un programa que simula una tela (hecha por resorte y vértices) en WebGL. Lo que debe hacer el programa es permitir que el usuario haga clic en un punto de la tela, arrastrándolo siguiendo al mouse y si el usuario vuelve a hacer clic lo suelte. Necesito verificar qué evento de clic es el que inicia el arrastre y cuál lo termina, luego usé una variable global "clic", la configuré en falso al principio y la cambié cada vez que se activa el clic del evento. Ahora, para el arrastre, necesito tomar periódicamente las coordenadas del mouse, luego pensé que usar un evento "mousemove" era la mejor solución: si el "clic" se establece en verdadero, esto significa que estamos en la "fase de arrastre" , luego se debe llamar al evento mousemove y continuar funcionando hasta el próximo evento de clic. El problema es que no sé cómo usar el movimiento del mouse en relación con el evento de clic: si pongo el evento de movimiento del mouse fuera del evento de clic, nunca entramos en eso, y si pongo el evento de movimiento del mouse dentro del evento de clic, además, si la variable "pulsada" cambia de verdadero a falso, siempre se llama al evento mousemove. El esqueleto del código es el siguiente:
var clicked = false; function exec() { let web_gl = document.getElementById("webgl-canvas").getContext('webgl2'); web_gl.canvas.addEventListener('click', (e) => { clicked = !clicked; console.log(clicked); if (clicked == true) { web_gl.canvas.addEventListener('mousemove', (e) => { //do something for dragging }); }; }); } function main() { exec(); };Aquí también, si la consola imprime tanto falso como verdadero de la manera correcta, ingresamos siempre en la condición if, parece que la condición ve "clic" siempre verdadero. La otra opción era esta:
var clicked = false; function exec() { let web_gl = document.getElementById("webgl-canvas").getContext('webgl2'); web_gl.canvas.addEventListener('click', (e) => { clicked = !clicked; console.log(clicked); }); if (clicked == true) { web_gl.canvas.addEventListener('click', (e) => { \\do something for dragging }); } } function main() { exec(); };En este caso nunca entramos en el evento, y no entiendo por qué. ¿Alguien tiene una pista sobre este problema o una mejor idea para manejar lo que necesito implementar?
Encontré la solución. Utilicé el evento de clic en la función principal () que se llama solo una vez, establecí un indicador de modo que se niegue cuando se detecta un clic (pasando de falso a verdadero y viceversa). Dentro del evento clic, si la bandera es verdadera, este es el primer clic, agrego el evento mousemove, eligiendo las coordenadas.
Dirigiéndose a su segundo fragmento: su código se ejecuta de forma asíncrona, los controladores de eventos no se ejecutan hasta que se emite el evento, por lo tanto, el clicked aún estará en su estado inicial ( false ) cuando se evalúe la condición para agregar el controlador mousemove , por lo tanto, no lo hará agregarse y, por lo tanto, nunca ejecutarse.
Lo que desea hacer es agregar ambos controladores de eventos y verificar dentro del controlador de eventos mousemove si se clicked en true .
Por cierto. la lógica que está a punto de implementar significa que un usuario tiene que hacer clic (el mouse hacia abajo y hacia arriba) para activar el arrastre y hacer clic nuevamente para desconectarse, en lugar de lo que es la práctica común de la interfaz de usuario: hacer clic (mouse hacia abajo) y mantener presionado para arrastrar cosas.