这个javascript脚本有什么问题？ [英] What's wrong with this javascript script?
问题描述
可能重复：
为什么这不起作用？使用鼠标指针推送一个方框
这是一个用于推送盒子的脚本鼠标指针只有在从左侧按下该框时才有效。
This is a script to push a box using mouse pointer and it only work when the box is pushed from the left.
我已经制作了一个数组来取得鼠标指针的位置，并确定它是否会向左或者写。
I've made an array to take positions of the mouse pointer and determine if it's going left or write.
这是一个有效的示例到目前为止我得到了什么。
Here's a working example of what i got so far.
index.js
index.js
<html>
<head>
<title>Chase the box</title>
<style>
body {
}
.css-box{
position: absolute ;
top:20px;
width : 100px;
height : 100px;
background-color : blue;
}
.css-textbox{
margin-top: 500px;
}
</style>
</head>
<body>
<div id="box" class="css-box"></div>
<div class="css-textbox">
<p>All : <input id="allTextbox" type="text"></input></p>
<p>Left : <input id="leftTextbox" type="text"></input></p>
<p>Right : <input id="rightTextbox" type="text"></input></p>
<p>e.pageX(Left) : <input id="pageXTextbox" type="text"></input></p>
<p>e.pageX(Right) : <input id="pageXRightTextbox" type="text"></input></p>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
script.js
script.js
var box = document.getElementById("box");
var allTextbox = document.getElementById("allTextbox");
var leftTextbox = document.getElementById("leftTextbox");
var rightTextbox = document.getElementById("rightTextbox");
var pageXTextbox = document.getElementById("pageXTextbox");
var PageXRightTextbox = document.getElementById("pageXRightTextbox");
Object.prototype.offsetRight = null;
var arr = [];
var pushBox = function(e){
var pageXRight = window.innerWidth - e.pageX;
box.offsetRight = window.innerWidth - (box.offsetWidth + box.offsetLeft);
if(arr.length < 2){
arr.push(e.pageX);
} else {
if(arr[0] < arr[1]){
if(e.pageX >= box.offsetLeft){
box.style.left = e.pageX + "px";
}
} else if(arr[0] > arr[1]){
if(pageXRight >= box.offsetRight){
box.style.right = pageXRight + "px";
}
}
arr.shift(arr[0] , arr[1]);
}
allTextbox.value = window.innerWidth;
leftTextbox.value = box.offsetLeft;
rightTextbox.value = box.offsetRight;
pageXTextbox.value = e.pageX;
pageXRightTextbox.value = pageXRight;
}
document.addEventListener("mousemove" , pushBox);
推荐答案
问题出在两个地方：
-
你不应该同时左右设置css属性，这会混淆应该指定位置的浏览器。如果您设置了一个，请将另一个设置为空。
You should not set both css attribute left and right at the same time, this would confuse the browser which should dictate the location. If you set one, set the other to null.
请参阅下面的评论
我还稍微修改了你的脚本，因为arr [0]和arr [1]不易读，因为它们没有传达它们是什么，所以我给数组赋值变量为了更好的可读性。
I also slightly revised your script as arr[0] and arr[1] are not easy to read as they don't convey what they are, so I assign a variable to the array values for better readability.
快乐推送。
var pushBox = function(e){
var pageXRight = window.innerWidth - e.pageX;
box.offsetRight = window.innerWidth - (box.offsetWidth + box.offsetLeft);
if(arr.length < 2){
arr.push(e.pageX);
console.log(JSON.stringify(arr));
} else {
var previousX = arr[0];
var newX = arr[1];
if(previousX < newX){
// add e.pageX <= box.offsetRight to ensure that mouse appearance to the right of the box would not push the box
if(e.pageX >= box.offsetLeft && e.pageX <= box.offsetRight){
box.style.right = null;
box.style.left = e.pageX + "px";
}
} else if(previousX > newX){
if(pageXRight >= box.offsetRight){
box.style.left = null;
box.style.right = pageXRight + "px";
}
}
arr.shift(arr[0] , arr[1]);
}
allTextbox.value = window.innerWidth;
leftTextbox.value = box.offsetLeft;
rightTextbox.value = box.offsetRight;
pageXTextbox.value = e.pageX;
pageXRightTextbox.value = pageXRight;
}
这篇关于这个javascript脚本有什么问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
