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

Question

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

nik*_*iko 4 javascript javascript-events

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

Run Code Online (Sandbox Code Playgroud)

如何mousedown在图像上使用事件？和mousedown事件(我的意思是mousedown在图像上),它应该mousemove在JavaScript中不断运行事件功能,mouseup甚至在发生时它应该停止.如何mousemove连续循环事件？无法实现.我在谷歌上找到了一些解决方案但无法弄清楚语法和所有问题.如果你以某种方式发布相同的请解释我的解决方案.

对不起忘了告诉你我的mousedown和mousevents不行.有人建议使用锚标签就可以了吗？为什么mouseevents要为图像工作？

Answer 1

And*_* D. 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，4 月前
查看次数：	31015 次
最近记录：	10 年，8 月前