Question

我写了这个javascript代码，效果很好。

但是当鼠标被击落并移动时，我无法获得鼠标位置，你能帮助我吗？

有什么不对吗？

var cv = document.getElementById('cv');
var mouse = {
    position : {x:0, y:0},
    down : false,
    downedPos :{x:0, y:0},
    upedPos :{x:0, y:0},
}
mouse.getPosition = function(element, evt) {
    var rect = element.getBoundingClientRect(), 
    root = document.documentElement;

    this.position.x = evt.clientX - rect.left - root.scrollLeft;
    this.position.y = evt.clientY - rect.top - root.scrollTop;
    return this.position;
}

cv.addEventListener('mousedown', function(e){
    mouse.down = true;
    mouse.downedPos = mouse.getPosition(this, e);
});

cv.addEventListener('mousemove', function(e){
    ms = mouse.getPosition(this, e);
    if(mouse.down){
        mouse.upedPos = ms;
    }
});

cv.addEventListener('mouseup', function(e){
    mouse.down = false;
});

鼠标按下，移动，最后鼠标按下事件downedPos等于upedPos

Answer 1

由于您传递了对象position的引用，后者修改了相同的对象，因此所有引用都将相应地更新。

一种可能的解决方案是克隆对象并保留它所拥有的值的副本。为此，可以使用JSON.stringify然后JSON.parse：

ms = mouse.getPosition(this, e);
mouse.downedPos = JSON.parse(JSON.stringify(ms));

或者您可以克隆该对象：

function clone(obj) {
    if (null == obj || "object" != typeof obj) return obj;
    var copy = obj.constructor();
    for (var attr in obj) {
        if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
    }
    return copy;
}

ms = mouse.getPosition(this, e);
mouse.downedPos = clone(ms);

这里有一个使用clone的完整示例：

＆＃13;

var cv = document.getElementById('cv');
// source: http://stackoverflow.com/questions/728360/most-elegant-way-to-clone-a-javascript-object
function clone(obj) {
  if (null == obj || "object" != typeof obj) return obj;
var copy = obj.constructor();
for (var attr in obj) {
  if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
}
  return copy;
}
var mouse = {
  position : {x:0, y:0},
  down : false,
  downedPos :{x:0, y:0},
  upedPos :{x:0, y:0},
}
mouse.getPosition = function(element, evt) {
  var rect = element.getBoundingClientRect(), 
  root = document.documentElement;

  this.position.x = evt.clientX - rect.left - root.scrollLeft;
  this.position.y = evt.clientY - rect.top - root.scrollTop;
  document.getElementById('px').innerHTML = this.position.x;
  document.getElementById('py').innerHTML = this.position.y;
  return this.position;
}

cv.addEventListener('mousedown', function(e){
  ms = mouse.getPosition(this, e);
  // copy the object value without the reference
  mouse.downedPos = clone(ms);
  mouse.down = true;
  document.getElementById('sx').innerHTML = mouse.downedPos.x;
  document.getElementById('sy').innerHTML = mouse.downedPos.y;
});

cv.addEventListener('mousemove', function(e){
  ms = mouse.getPosition(this, e);
  if(mouse.down){
mouse.upedPos = clone(ms);
document.getElementById('ex').innerHTML = mouse.upedPos.x;
document.getElementById('ey').innerHTML = mouse.upedPos.y;
  }
});

cv.addEventListener('mouseup', function(e){
  mouse.down = false;
});

＆＃13;

#cv  {
  width: 100px;
  height: 100px;
  background-color: gray;
  float: left
}

＆＃13;

<div id="cv"></div>
<table class="tg">
  <tr>
<td>start x</td>
<th id="sx">0</th>
<td>start y</td>
<th id="sy">0</th>
  </tr>
  <tr>
<td>position x</td>
<th id="px">0</th>
<td>position y</td>
<th id="py">0</th>
  </tr>
  <tr>
<td>end x</td>
<th id="ex">0</th>
<td>end y</td>
<th id="ey">0</th>
  </tr>
</table>

＆＃13;

Answer 2

我拿了你的代码，并在它周围添加了一些html来显示结果。我无法复制你的问题。也许您在任何地方使用它都没有引用正确的变量？还是改写它？

＆＃13;

var cv = document.getElementById('cv');
var mouse = {
  position: {
    x: 0,
    y: 0
  },
  down: false,
  downedPos: {
    x: 0,
    y: 0
  },
  upedPos: {
    x: 0,
    y: 0
  },
}
mouse.getPosition = function(element, evt) {
  var rect = element.getBoundingClientRect(),
    root = document.documentElement;

  this.position.x = evt.clientX - rect.left - root.scrollLeft;
  this.position.y = evt.clientY - rect.top - root.scrollTop;
  return this.position;
}

cv.addEventListener('mousedown', function(e) {
  mouse.down = true;
  mouse.downedPos = mouse.getPosition(this, e);
  document.getElementById("downedPos").innerHTML = JSON.stringify(mouse.downedPos);
});

cv.addEventListener('mousemove', function(e) {
  ms = mouse.getPosition(this, e);
  if (mouse.down) {
    mouse.upedPos = ms;
  }
  document.getElementById("upedPos").innerHTML = JSON.stringify(mouse.upedPos);
});

cv.addEventListener('mouseup', function(e) {
  mouse.down = false;
});

＆＃13;

<div id="cv" style="width:300px;height:300px;background:#EEE;">
  DownedPos:<p id="downedPos"></p>
  upedPOS:  <p id="upedPos"></p>
</div>

＆＃13;

在mousedown和mousemove事件中获取鼠标位置

2 个答案: