javascript 将js脚本移动到外部文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32942778/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Move js script to external file
提问by Laetis
I have the following code in a div to move the div when clicking on he move button:
我在 div 中有以下代码，用于在单击移动按钮时移动 div：
<input id="move1" class="smallButtonidle" type="button" value="M" style="top: 0px; left: 0px; float: left;" />
<script type="text/javascript">
var isDown1 = false;
document.getElementById('move1').addEventListener('mousedown', function(e1)
{
isDown1 = true;
offset = [document.getElementById('jsmolwindow1').offsetLeft - e1.clientX,
document.getElementById('jsmolwindow1').offsetTop - e1.clientY];
}, true);
window.addEventListener('mouseup', function() {
isDown1 = false;
}, true);
window.addEventListener('mousemove', function(event) {
if (isDown1) {
mousePosition = {
x : event.clientX,
y : event.clientY
};
document.getElementById('jsmolwindow1').style.left = (mousePosition.x + offset[0]) + 'px';
document.getElementById('jsmolwindow1').style.top = (mousePosition.y + offset[1]) + 'px';
}
}, true);
</script>
I would like to move this js script to an external file to clarify my html
我想将此 js 脚本移动到外部文件以阐明我的 html
I modify my html code the following way :
我通过以下方式修改我的 html 代码：
<input id="move1" class="smallButtonidle" type="button" value="M" style="top: 0px; left: 0px; float: left;" onclick="move1js()"/>
And put in an include js external file:
并放入一个包含 js 的外部文件：
function move1js()
{
var isDown1 = false;
document.getElementById('move1').addEventListener('mousedown', function(e1)
{
isDown1 = true;
offset = [document.getElementById('jsmolwindow1').offsetLeft - e1.clientX,
document.getElementById('jsmolwindow1').offsetTop - e1.clientY];
}, true);
window.addEventListener('mouseup', function() {
isDown1 = false;
}, true);
window.addEventListener('mousemove', function(event) {
if (isDown1) {
mousePosition = {
x : event.clientX,
y : event.clientY
};
document.getElementById('jsmolwindow1').style.left = (mousePosition.x + offset[0]) + 'px';
document.getElementById('jsmolwindow1').style.top = (mousePosition.y + offset[1]) + 'px';
}
}, true);
}
Doing so my move button stop working. I don't understand why.
这样做我的移动按钮停止工作。我不明白为什么。
Any ideas?
有任何想法吗？
回答by Suyog
Steps for your solution are:
您的解决方案的步骤是：
- Create a javascript file (a file with extension
.js). Lets suppose the file ismoveDiv.js - Move all the javascript code into this newly created file as it is
except
<script>&</script>tags. Give reference to this file in your HTML file as
<script src="moveDiv.js" type="text/javascript"></script>
- 创建一个 javascript 文件（扩展名为 的文件
.js）。让我们假设文件是moveDiv.js - 将所有 javascript 代码移动到这个新创建的文件中，除了
<script>&</script>标签。 在您的 HTML 文件中引用此文件作为
<script src="moveDiv.js" type="text/javascript"></script>
This should start moving your button again.
这应该会再次开始移动您的按钮。
