Question

这里有什么遗失吗？我只是想通过点击它来选择图像，它应该用鼠标拖动（没有按住鼠标键），直到它点击到屏幕的不同部分。我已经使用函数fixPageXY（e）和onmousemove函数，遵循教程，但仍然没有。

<script type="text/javascript">
function fixPageXY(e) {
if (e.pageX == null && e.clientX != null ) {
var html = document.documentElement;
var body = document.body;

e.pageX = e.clientX + (html.scrollLeft || body && body.scrollLeft || 0);
e.pageX -= html.clientLeft || 0;

e.pageY = e.clientY + (html.scrollTop || body && body.scrollTop || 0);
e.pageY -= html.clientTop || 0;
 }
}
}


document.getElementById('ball').onmousedown = function() {
   this.style.position = 'absolute';

   var self = this;

   document.onmousemove = function(e) {
    e = e || event;
     fixPageXY(e);
     // put ball center under mouse pointer. 25 is half of width/height
      self.style.left = e.pageX-25+'px';
    self.style.top = e.pageY-25+'px';
   }
    this.onmouseup = function() {
     document.onmousemove = null;
  }
    }
 </script>

我的形象很简单，

<body onload="onmousemove();onmouseup();">
 <img id="ball" src="ball.png" style="width:100px;height:100px;"/>
 </body>

我使用谷歌浏览器，这可能是一个问题吗？非常感谢您的帮助。

Answer 1

您的代码中存在一些语法错误，如果您运行的是Chrome，则只需点击键盘上的F12即可调出控制台，以便您阅读可能存在的任何错误。 Here's a fiddle只需对您的代码进行一些调整，使其能够顺利运行......并且通过调整，我的意思是在定义函数和您在body中调用的函数后，还有一个额外的结束括号onload我无法以这种方式访问，所以我删除了它并且它有效。

Answer 2

此代码可以正常工作：

function fixPageXY(e) {
    if(e.pageX == null && e.clientX != null ) {
        var html = document.documentElement, body = document.body;
        e.pageX = e.clientX + (html.scrollLeft || body && body.scrollLeft || 0);
        e.pageX -= html.clientLeft || 0;
        e.pageY = e.clientY + (html.scrollTop || body && body.scrollTop || 0);
        e.pageY -= html.clientTop || 0;
    }
}

document.getElementById("ball2").onmousedown = function () {
  this.style.position = "absolute";

  var self = this;

  document.onmousemove = function (e) {
    e = e || event;
    fixPageXY (e); 

    self.style.left = e.pageX-25+'px';
    self.style.top = e.pageY-25+'px';
  }
  this.onmouseup = function () {
    document.onmousemove = null;
  }
}

document.getElementById("ball2").ondragstart = function () { return false; }

使用fixPageXY（e）和onmousemove（）并且图像不会移动？

2 个答案: