鼠标向下，鼠标移动和鼠标事件的图像？

问题描述：

如何用鼠标移动图像？ 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>

如何在图像上使用mousedown事件？并与mousedown事件（我的意思是与图片上的mousedown），它应该在JavaScript中不断运行mousemove事件函数，并且当mouseup甚至发生它应该停止。如何连续循环mousemove事件？无法解决问题。我在google上找到了一些解决方案，但无法弄清楚它的语法和全部。如果您以某种方式发布相同的内容，请解释我的解决方案。

很抱歉忘记告诉你我的mousedown和mousevents不工作。有人建议使用锚标签，那是好的？为什么mouseevents正在为图像工作？

答

这样的：

<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>

答

是的，这些都是正确的事件，但几件事情要记住：

不要使用需要在标记中指定onmousemove风格事件绑定。阅读本文以获取有关javascript事件处理的更多背景信息。
与javascript结合使用，您很可能需要一些来自css的帮助。接受它 - 不要依靠javascript来完成所有繁重的工作。
如果您对JavaScript有经验（知道语言的行为），那么我建议您使用jquery来完成繁重的工作（如事件绑定，属性设置等） - 它将使您的代码更加简洁。

干杯！

鼠标向下，鼠标移动和鼠标事件的图像？

相关推荐