Javascript 为什么这不起作用？用鼠标指针推箱子_Javascript_Javascript Events

Javascript 为什么这不起作用？用鼠标指针推箱子

javascript

Javascript 为什么这不起作用？用鼠标指针推箱子,javascript,javascript-events,Javascript,Javascript Events,我是Javascript的初学者，正在尝试制作一个简单的脚本，用鼠标指针推动一个框。但不幸的是，由于某些原因，它不起作用，我希望你们能帮助我（这个脚本非常原始，到现在为止只从左侧推动长方体） index.html: <html> <head> <title>Chase the box</title> <style> body { } .css-box{

我是Javascript的初学者，正在尝试制作一个简单的脚本，用鼠标指针推动一个框。但不幸的是，由于某些原因，它不起作用，我希望你们能帮助我

（这个脚本非常原始，到现在为止只从左侧推动长方体）

index.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>

一个JQuery版本，但实现与您尝试执行的相同

我在脚本中看到的主要问题是，e.pageX==box.offsetLeft意味着只有当pageX正好是offsetLeft时才会触发它

mousemove事件不会触发每个像素，因此这种方法不起作用。最简单的方法是将mousemove设置到实际的框上（因此只有当用户鼠标越过框时才会触发）

其次，在长方体上设置left属性没有任何作用，因为左/右属性是由margin:auto设置的。将其更改为position:absolute会使它实际上注意到left属性。

JQuery版本，但实现的效果与您尝试的相同

我在脚本中看到的主要问题是，e.pageX==box.offsetLeft意味着只有当pageX正好是offsetLeft时才会触发它

mousemove事件不会触发每个像素，因此这种方法不起作用。最简单的方法是将mousemove设置到实际的框上（因此只有当用户鼠标越过框时才会触发）

其次，在长方体上设置left属性没有任何作用，因为左/右属性是由margin:auto设置的。将其更改为position:absolute会使它实际上注意left属性。

您需要为元素设置CSS

position

属性，而不是

static

，以便CSS

left

属性可以工作

.css-box{
     position: absolute;
     width : 100px;
     height : 100px;
     margin : auto;
     background-color : blue;
}

您需要为元素设置CSS

position

属性，而不是

static

，以便CSS

left

属性可以工作

.css-box{
     position: absolute;
     width : 100px;
     height : 100px;
     margin : auto;
     background-color : blue;
}

box.style.left

是一个字符串。在JavaScript中，如果您执行

string+int

操作，int将被类型转换为字符串，您将得到

string+string

。例如，如果

box.style.left

是

10px

，您会得到：

'10px' + 1 + 'px'
  int typecasted to string
'10px' + '1' + 'px'
  create one string
'10px1px'

这将是

box.style.left

的值。那不是你想要的

要解决此问题，可以使用

parseInt（）

，将字符串解析为int：

box.style.left = parseInt(box.style.left) + 1 + "px";

只有当光标的X位置与

box.offsetLeft

的像素完全相同时，if才匹配。这几乎是不可能的，我不知道你想用它做什么，如果

至少，

box.style.left

第一次没有值。您需要首先将该值设置为

，然后使用该事件

一个有效的例子是：（请注意，我添加了

position:relative；

，因为我们不能在当前位置上使用

left

属性）

由于您是JS新手，因此还有一些提示：

如果您这样做：

X=X+12
您可以将其缩短为：
X+=12


box.style.left是一个字符串。在JavaScript中，如果您执行string+int
操作，int将被类型转换为字符串，您将得到string+string
。例如，如果box.style.left
是10px
，您会得到：
'10px' + 1 + 'px'
  int typecasted to string
'10px' + '1' + 'px'
  create one string
'10px1px'

这将是box.style.left
的值。那不是你想要的
要解决此问题，可以使用parseInt（）
，将字符串解析为int：
box.style.left = parseInt(box.style.left) + 1 + "px";

只有当光标的X位置与box.offsetLeft
的像素完全相同时，if才匹配。这几乎是不可能的，我不知道你想用它做什么，如果
至少，box.style.left
第一次没有值。您需要首先将该值设置为0
，然后使用该事件
一个有效的例子是：（请注意，我添加了position:relative；
，因为我们不能在当前位置上使用left
属性）

由于您是JS新手，因此还有一些提示：

如果您这样做：
X=X+12
您可以将其缩短为：
X+=12

最后，最好在加载时添加内容，而不是让脚本在主体中活动
这是一个位于页面头部的脚本，其他问题已经由其他ppl解决
var pushBox = function(e){
    if(e.pageX >= box.offsetLeft){
        box.style.left = (parseInt(box.style.left,10) + 1) + "px";
    }
},box;
window.onload=function() {
  box = document.getElementById("box");
  document.addEventListener("mousemove" , pushBox);
}

最后，最好是在加载时添加内容，而不是让脚本活在主体中
这是一个位于页面头部的脚本，其他问题已经由其他ppl解决
var pushBox = function(e){
    if(e.pageX >= box.offsetLeft){
        box.style.left = (parseInt(box.style.left,10) + 1) + "px";
    }
},box;
window.onload=function() {
  box = document.getElementById("box");
  document.addEventListener("mousemove" , pushBox);
}

为什么不能执行e.pageX==box.offsetLeft
？我已经检查过了，把它们都打印出来，在某个点上，它们是相互匹配的。另一个问题，为什么box.style.left
在开始时没有值？虽然我尝试过使用css设置left=50px
，但在我检查时它仍然没有值。为什么会这样？非常感谢您提供的详细答案和提示：）“虽然我尝试使用css设置left=50px，但在我选中它时，它仍然没有任何值。为什么会出现这种情况？”使用box.style
可以获得style属性，因此需要在style属性中设置它。“怎么可能不执行e.pageX==box.offsetLeft？我已经选中它来打印它们，并且在某个点上它们彼此匹配。”我不知道您想做什么？是否仅在完全相同时移动它？那么你是对的，但我想你会有不同的想法。怎么可能不做e.pageX==box.offsetLeft
？我已经检查过了，把它们都打印出来，在某个点上，它们是相互匹配的。另一个怪人