Estoy tratando de crear un botón Me gusta con una input con el tipo de image que cambia su src cuando se desplaza o se hace clic. Quiero cambiarlo cuando se desplaza y recuperar su fuente anterior cuando no se desplaza. Así que usé onmouseover y onmouseout para hacer esto. También usé onclick en el src cuando se hace clic en él.
El problema es que cuando hago clic en él, cambia según lo previsto, pero tan pronto como muevo el mouse para que ya no se desplace, llama a la función onmouseout y esto no es lo que necesito.
Editar: hay varios botones, por lo que no puedo usar variables booleanas para verificar si se hizo clic.
¿Qué debo hacer para no ejecutar onmouseout cuando se hizo clic en él?
<input type="image" src="path" onmouseover="likeHover(this)" onmouseout="likeUnhover(this)" onclick="like(this, '{{post.id}}')"> function likeHover(btn) { btn.src = '../../static/network/img/heart-pink.png'; } function likeUnhover(btn) { btn.src = '../../static/network/img/heart-black.png'; } function like(btn) { btn.src = '../../static/network/img/heart-red-filled.png'; }Podría usar una variable booleana y establecerla en verdadero si se hizo clic en el botón. Y use addEventListener en el código JS y no en los atributos HTML:
const input = document.querySelector("input[type=image]"); let clicked = false; input.addEventListener("mouseover", (e) => { if (!clicked) e.target.src = '../../static/network/img/heart-pink.png'; }); input.addEventListener("mouseout", (e) => { if (!clicked) e.target.src = '../../static/network/img/heart-black.png'; }); input.addEventListener("click", (e) => { clicked = true; e.target.src = '../../static/network/img/heart-red-filled.png'; }); <input type="image" src="path">