Javascript 图像的鼠标按下，鼠标移动和鼠标抬起事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7411180/
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
Mouse down,mouse move and mouse up event for an image?
提问by niko
How to move an image with mouse?
onmousedownand onmousemoveare the events to handle right?
如何用鼠标移动图像？
onmousedown而onmousemove在事件处理吧？
<html>
<body>
<script type="text/javascript">
funcion good()
{
document.getElementById("omna");
document.getElementById("omna).style.position="absolute";
document.getElementById("omna").style.top=somevalue; 'these keeps changing
document.getElementById("omna").style.left=somevalue; ' these keeps changing
}
</script>
<img id="omna" src"/something.jpg" onmousedown="highlight() onmousemove="good()" onmousedown="stop()"> 'not working
</body>
</html>
How to use mousedownevent on image? and with the mousedownevent(I mean with the mousedownon the image), it should constantly run mousemoveevent function in JavaScript and when mouseupeven occurs it should stop.
How do I loop through mousemoveevent continuously ? unable to make it out. I found some solutions on google but unable to figure it out the syntax and all. If somehow you post the same please explain me your solution.
如何mousedown在图像上使用事件？和mousedown事件（我的意思mousedown是图像上的），它应该mousemove在 JavaScript 中不断运行事件函数，mouseup甚至发生时它应该停止。如何mousemove连续循环事件？无法解决。我在谷歌上找到了一些解决方案，但无法弄清楚语法和所有内容。如果您以某种方式发布相同的内容，请向我解释您的解决方案。
Sorry forgot to tell you that my mousedownand the mouseventsaren't working. Some people suggest use anchor tag to that is that okay ? and why mouseeventsare working for an image?
抱歉忘了告诉你，我的mousedown和我的mousevents都不起作用。有些人建议使用锚标签，可以吗？为什么mouseevents要为图像工作？
回答by Andrew D.
like this:
像这样：
<html>
<head>
<style>
html,body {
height:100%;
}
</style>
<script type="text/javascript">
var omnaEl,dragData=null;
function window_onload() {
omnaEl=document.getElementById("omna")
if(window.addEventListener) {
omnaEl.addEventListener('mousedown',startDrag,false);
document.body.addEventListener('mousemove',drag,false);
document.body.addEventListener('mouseup',stopDrag,false);
}
else if(window.attachEvent) {
omnaEl.attachEvent('onmousedown',startDrag);
document.body.attachEvent('onmousemove',drag);
document.body.attachEvent('onmouseup',stopDrag);
}
}
function startDrag(ev) {
if(!dragData) {
ev=ev||event;
dragData={
x: ev.clientX-omnaEl.offsetLeft,
y: ev.clientY-omnaEl.offsetTop
};
};
}
function drag(ev) {
if(dragData) {
ev=ev||event;
omnaEl.style.left=ev.clientX-dragData.x+"px";
omnaEl.style.top=ev.clientY-dragData.y+"px";
}
}
function stopDrag(ev) {
if(dragData) {
ev=ev||event;
omnaEl.style.left=ev.clientX-dragData.x+"px";
omnaEl.style.top=ev.clientY-dragData.y+"px";
dragData=null;
}
}
</script>
</head>
<body onload='window_onload();'>
<img id="omna" src="http://t0.gstatic.com/images?q=tbn:ANd9GcRi-8XnnXwAZmz_5R5LHRHMNlnYYHCP4WqRdu6vhf_ru8wLK9XB3IrNrwix"
width="100px" height="100px" unselectable="on" style="position:absolute;user-select:none;-moz-user-select:none;-webkit-user-select:none;"/>
</body>
</html>
回答by jrharshath
Yes, these are the right events, but a few things to keep in mind:
是的，这些是正确的事件，但要记住一些事情：
- Don't use
onmousemovestyle event bindings that need to be specified in the markup. Read this to get more background on javascriptevent handling. - In conjunction with javascript, you will most probably need some help from css. Take it - don't rely on javascript to do all the heavy lifting.
- If you're experienced with javascript (know how the language behaves) then I suggest you use jqueryto do the heavy lifting (like event binding, attribute setting etc) - it will make your code more concise.
- 不要使用
onmousemove需要在标记中指定的样式事件绑定。阅读本文以获取有关javascript事件处理的更多背景信息。 - 与 javascript 结合使用，您很可能需要来自css 的一些帮助。接受它 - 不要依赖 javascript 来完成所有繁重的工作。
- 如果您对 javascript 有经验（知道语言的行为方式），那么我建议您使用jquery来完成繁重的工作（如事件绑定、属性设置等）——它会使您的代码更加简洁。
Cheers!
干杯!
