Get the mouse position in mousedown and mousemove events

Question

I wrote this javascript code and it works well.

But I can't get mouse position when mouse downed and moved, can you help me ?

Is there something wrong ?

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;
});

After mouse down , move, and finally mouse up events downedPos is equal to upedPos

I've tested your code and it worked well, I don't know what might be making your code not work, try putting some console.log() on mousedown and mouseup with downedPos and upedPos. — MaikonFarias, Oct 24 '14 at 16:11

a--m · Accepted Answer · 2014-10-24T17:51:58.630

Since you are passing a reference of the object position and latter this same object gets modified all the references will update accordingly.

One possible solution is to clone the object and retain a copy of the values it holds. To do that it ca be used JSON.stringify and then JSON.parse:

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

Or you could clone the 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;
}

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

Here you have a full example using clone:

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;
});

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

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

thanks a million it works properly you learn me something new — Masoud Aghaei, Oct 24 '14 at 18:57

score 1 · Answer 2 · answered Oct 24 '14 at 16:30

I took your code, and added some html around it to show results. I can't replicate your issue. Perhaps you're not referencing the right variable wherever you're using it? Or overwriting it?

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;
});

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

Get the mouse position in mousedown and mousemove events

2 Answers2