鼠标按下，鼠标移动和鼠标向上事件的图像？ [英] Mouse down,mouse move and mouse up event for an image?
问题描述
如何用鼠标移动图像？
onmousedown 和 onmousemove 是要处理的事件吗？
How to move an image with mouse?
onmousedown and onmousemove are the events to handle right?
<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>
如何在图像上使用 mousedown 事件？并且使用 mousedown 事件（我的意思是图片上的 mousedown ），它应该不断运行 mousemove JavaScript中的事件函数，当 mouseup 发生时，它应该停止。
如何连续循环 mousemove 事件？无法实现。我在谷歌上找到了一些解决方案但无法弄清楚语法和所有问题。如果你以某种方式发布相同的请解释我的解决方案。
How to use mousedown event on image? and with the mousedown event(I mean with the mousedown on the image), it should constantly run mousemove event function in JavaScript and when mouseup even occurs it should stop.
How do I loop through mousemove event 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 和 mousevents 无效。有人建议使用锚标签就可以了吗？为什么 mouseevents 正在为图像工作？
Sorry forgot to tell you that my mousedown and the mousevents aren't working. Some people suggest use anchor tag to that is that okay ? and why mouseevents are working for an image?
推荐答案
这样：
<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>
这篇关于鼠标按下，鼠标移动和鼠标向上事件的图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
