logo标签列表

图片的鼠标按下、鼠标移动和鼠标松开事件？

javascriptdom-events
4
如何使用鼠标移动图像？ 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对于图像有效？
2个回答
8

像这样：

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

是的，这些是正确的事件，但需要注意以下几点：

  1. 不要使用需要在标记中指定的onmousemove样式事件绑定。阅读此内容以获取有关javascript事件处理的更多背景信息。
  2. 与javascript一起，您很可能需要一些来自css的帮助。接受它-不要依赖javascript来完成所有繁重的工作。
  3. 如果您熟悉javascript（了解语言行为），那么我建议您使用jquery来完成繁重的工作（如事件绑定、属性设置等）-这将使您的代码更简洁。

干杯！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接