我是 JavaScript 的初学者，试图制作一个简单的脚本，使用鼠标指针推动一个盒子，但不幸的是由于某种原因它不起作用，我希望你能帮助我。
（这个脚本真的很原始，到现在为止只从左边推动盒子）。
索引.html：
<html>
<head>
<title>Chase the box</title>
<style>
body {
}
.css-box{
width : 100px;
height : 100px;
margin : auto;
background-color : blue;
}
</style>
</head>
<body>
<div id="box" class="css-box"></div>
<script type="text/javascript" src="script.js"></script>
</body>
脚本.js：
var box = document.getElementById("box");
var pushBox = function(e){
if(e.pageX == box.offsetLeft){
box.style.left = box.style.left + 1 + "px";
}
};
document.addEventListener("mousemove" , pushBox);
JQuery 版本，但完成的功能与您尝试执行的操作相同
http://jsfiddle.net/3mxC3/1/ http://jsfiddle.net/3mxC3/1/
我在你的脚本中看到的主要问题是 e.pageX == box.offsetLeft 意味着只有当 pageX 恰好是 offsetLeft 时才会触发它。
mousemove 事件不会触发每个像素，因此这种方法不起作用。实现它的最简单方法是将鼠标移动到实际的框上（因此只有当用户鼠标悬停在框上时才会触发）
其次，在盒子上设置 left 属性没有任何作用，因为左/右是通过 margin: auto 设置的。将其更改为position:absolute使其实际上关注左侧属性。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
