极客观点
项目管理
HarmonyOS
html如下
`
<style>
/* body {
margin: 0;
}
*/
.buttoncon {
height: 100px;
}
.control {
display: block;
float: left;
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
margin: 40px 20px 0 20px;
border: 1px solid black;
}
.moveleft {
width: 200px;
height: 200px;
background: lightgreen;
position: relative;
left: -200px;
}
</style>
<body>
<div class="buttoncon">
<div class='control' onmouseover='moveleft(document.getElementsByClassName("moveleft")[0],0)' onmouseout='moveleft(document.getElementsByClassName("moveleft")[0],-200)'>moveleft</div>
</div>
<div class="moveleft"></div>
</body>`
js如下
var timer;
function moveleft(ele, target) {
clearInterval(timer);
var speed = (target - ele.offsetLeft) / 50;
timer = setInterval(function() {
if (
(speed > 0 && ele.offsetLeft >= target) ||
(speed < 0 && ele.offsetLeft <= target)
) { clearInterval(timer);
return;
}
ele.style.left = ele.offsetLeft + speed + "px";
}, 20);
}在body没将margin设置为0之前，鼠标移出.control时， .moveleft会持续向右移动，而不是设想的向左移动。在ie下测试也一样。调试发现各个变量也没问题。
但是body的margin设置为0之后，就是正常的。有人知道这是什么原因造成的吗？
html5
chrome
首页在我浏览器里，不加margin:0的话，body默认的margin为8，不同浏览器可能结果不一样，但是原因是一样的。
你不加margin:0，导致body有个body，这个时候，你的moveleft盒子的offsetLeft和left是两个不相等的值的，当你的left为0的时候，你的offsetLeft是为8的。因为这个offsetLeft把body的margin也算进去了。moveleft盒子结束移动条件是offsetLeft>=0。
这个时候，你第一次移开鼠标，offsetLeft=0,left=-8.16。注意，这个时候speed为-4，moveleft盒子第一次移动，left=0+-4 = -4。此时，盒子是向右移动了4个单位，那么offsetLeft=4。
第二次移动，left=4-4=0。此时，盒子再向又移动4个单位，那么offsetLeft=8。
如此循环，offsetLeft是只会越来越大的，这样的话，就不满足if语句，这样就会一直移动下去了。
重点是因为不加margin:0，moveleft盒子的offsetLeft和left是两个不相等的值的。这就导致了逻辑上出现错误。