这个javascript脚本有什么问题? [英] What's wrong with this javascript script?
本文介绍了这个javascript脚本有什么问题?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
可能的重复:
为什么这不起作用?使用鼠标指针推动一个盒子
这是一个使用鼠标指针推动盒子的脚本，它只在盒子从左边推动时才起作用.
我创建了一个数组来获取鼠标指针的位置，并确定它是向左移动还是写入.
这是我目前得到的一个示例.
index.js
<头><title>追逐方块</title><风格>身体 {}.css-box{位置:绝对；顶部:20px；宽度:100px；高度:100px；背景颜色:蓝色；}.css-文本框{边距顶部:500px；}</风格><身体><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><script type="text/javascript";src=script.js"></script></html>
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);} 别的 {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 属性 left 和 right ，这会混淆应该指示位置的浏览器.如果您设置了一个，请将另一个设置为空.
请看下面我的评论
我还稍微修改了您的脚本，因为 arr[0] 和 arr[1] 不容易阅读，因为它们没有传达它们的含义，因此我为数组值分配了一个变量以提高可读性.
快乐推.
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));} 别的 {var previousX = arr[0];var newX = arr[1];if(previousX < newX){//添加 e.pageX <= box.offsetRight 以确保鼠标出现在框的右侧不会推动框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;}Possible Duplicate:
Why is this not working ? pushing a box using mouse pointer
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
<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
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);
解决方案
Problem lies in two places:
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.
See my comment below
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.
Happy pushing.
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屋！
查看全文
