Question

如何用鼠标移动图像？ 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事件？无法实现。我在谷歌上找到了一些解决方案但无法弄清楚语法和所有问题。如果以某种方式发布相同内容，请向我解释您的解决方案。

抱歉忘了告诉您我的mousedown和mousevents无效。有人建议使用锚标签就可以了吗？为什么mouseevents正在为图像工作？

Answer 1

像这样：

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

Answer 2

是的，这些都是正确的事件，但要记住一些事项：

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

干杯！

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

2 个答案: