He encontrado muchas preguntas y respuestas similares a las mías. Desafortunadamente, he tratado de adaptar esas respuestas para que se ajusten a mi problema, pero no puedo hacer que funcione. Estoy haciendo una aplicación de bloc de dibujo. El bloc de dibujo está hecho de un contenedor lleno de divs. Quiero que el color cambie solo cuando mousedown y el mouseover sean verdaderos. básicamente, quiero hacer clic y arrastrar mis líneas de dibujo. Probablemente voy a almorzar aquí, pero estoy en mi final intentando cosas.
let boxes = document.getElementsByClassName("grid-item"); let isClicked = false; let isHover = false; for (box of boxes) { box.addEventListener("mousedown", () => isClicked = true); } for (box of boxes) { box.addEventListener("mouseover", () => isHover = true); } function draw() { if (isClicked == true && isHover == true) { box.target.style.background_color = "black"; } }En lugar de intentar administrar y realizar un seguimiento de las variables globales, puede utilizar el objeto de evento pasado. En mi ejemplo, tengo una función que puede hacer que el objetivo del evento sea negro, cambiando el color de fondo. style.backgroundColor porque style.background-color es incorrecto para js. Si se activa el evento mousedown, puede asumir con seguridad que el cursor está sobre el elemento. El evento mouseover no siempre hace que el objetivo sea negro. En cambio, verifico la propiedad del evento .buttons que será 1 si se presiona el botón izquierdo del mouse y 0 si no. De esta manera, puedo verificar si se hace clic en él, luego simplemente pasamos el evento a nuestra función de hacer negro.
Es posible resolver este problema mediante el seguimiento de las variables globales, sin embargo, sería necesario realizar una gran cantidad de "administración de estado", lo que puede volverse desordenado y complejo rápidamente. Necesitaría una función de mouseout que apague isHover , así como una función de mouseup que apague isClick . Probablemente necesite un poco de rebote en caso de que el evento mouseout o mouseup no se active debido a un clic derecho o al cursor en una posición diferente. Luego, también necesitaría rastrear qué elemento es isClick isHover es redundante en este caso porque solo podemos verificar el objeto de evento desde nuestro evento de mouseover.
const boxes = [...document.getElementsByClassName("grid-item")]; const makeBlack = event => event.target.style.backgroundColor = "black"; function equip(box) { box.addEventListener("mousedown", makeBlack); box.addEventListener("mouseover", event => { if (event.buttons == 1) makeBlack(event); }); } boxes.forEach(equip);