阻止setAttribute运行两次

Question

我试图将一个元素捕捉到另一个元素下面，并使其保持原位。这个功能还可以，但每次我把它移动10px时它就会运行。所以它每次移动10倍甚至更远。。

function move_box() {
if(el.offsetLeft = 10){
console.log('moved the element 10px to the left!');
el.setAttribute('class', 'snap_in'); // class with css (transform: translateY(10px)
let not_called = false; 
console.log(not_called);
} else if (not_called = false){
console.log(not_called);
el.setAttribute('class', 'dont_move'); //class with css transform:translateY(0px);
}  
}

}

Answer 1

使用'==='而不是=

您分配的不是比较

const el = document.querySelector('.item');
let not_called;
el.addEventListener('mousedown', mousedown);
function mousedown(e){
window.addEventListener('mousemove', mousemove);
window.addEventListener('mouseup', mouseup);
let prevX = e.clientX;
let prevY = e.clientY;
function mousemove(e) {
let newX = prevX - e.clientX;
let newY = prevY - e.clientY;
const rect = el.getBoundingClientRect();
el.style.left = rect.left - newX + "px";
el.style.top = rect.top - newY + "px";
prevX = e.clientX;
prevY = e.clientY;  
}
function mouseup() {
window.removeEventListener('mousemove', mousemove);
window.removeEventListener('mouseup', mouseup);
console.log(el.offsetLeft);
console.log(el.offsetTop);
//let leftoffset = el.offsetLeft;
if (not_called == false){
console.log(not_called);
el.setAttribute('class', 'item');
}
else if(el.offsetLeft >= 180 && el.offsetLeft <= 220){
console.log('yes!');
el.setAttribute('class', 'snap_in');
not_called = false;
console.log(not_called);
}
}
}