Tengo este código que me redimensiona el cuadrado celeste, pero a veces cuando pulso el mouse sobre lo azul oscuro para redimensinarlo y lo muevo rápidamente me aparece esto: 🚫(en negro) y no se porque ocurre.
const elemento = document.querySelector(".elemento");
let mover = false;
let X;
let Y;
document.querySelector(".f").addEventListener("mousedown", amover);
function comprobar(e){
if(mover == true){
X = derecha(e, X);
}
return;
};
window.addEventListener("mousemove", comprobar);
window.addEventListener('mouseup', eliminar);
function amover(e){
X = e.clientX;
Y = e.clientY;
mover = true;
}
function eliminar(){
mover = false;
};
document.ondragstart = function(){return;}
function derecha(e, X){
const width = parseFloat(getComputedStyle(elemento).width) - (X - e.clientX);
if(width < 1)return X;
elemento.style.width = width + "px";
document.querySelector(".f").style.left = elemento.getBoundingClientRect().right + "px";
X = e.clientX;
return X;
}
.f {
width: 20px;
height: 50px;
background-color: blue;
position: absolute;
z-index:3;
cursor: e-resize;
margin-top: 0px;
left: 50px;
}
.elemento {
height: 50px;
width: 50px;
background-color: aqua;
}
<p class="f"></p>
<p class="elemento"></p>
He intentado resolverlo poniendo window a los dos controladores de eventos de mousemove y mouseup y document.ondragstart = function(){return;} (también intente poner window en vez de document y me daba lo mismo) para que no se genere un conflicto con la API de drag and drop, pero nose que falla. ¿Porqué me aparece el 🚫 y cómo lo soluciono? Muchisimas gracias!