CODEWITHSUNDEEP
javascript
Vik
Vik

Reputation: 9289

Find coordinate values using mouse events in java script

I want to record x coordinates in the following situation

when mouse is pressed down i should get X1 and if mouse is moved keeping button pressed and then when it is unpressed at that time X2

i can detect mouse down and mouse up events but not sure how to do it what i want

Upvotes: 0

Views: 166

Answers (3)

Robert
Robert

Reputation: 8767

Working example: http://jsfiddle.net/pmzmL/

HTML:

<div id="moveArea"></div>
<div id="info"></div>

CSS:

#moveArea{border:1px solid #000; height:200px; width:200px;}

jQuery:

function clickPos(event){
    $("body").append(event.pageX);
}

function unclickPos(event){
     $("body").append(event.pageX);
}

$("#moveArea").mousedown(clickPos);
$("#moveArea").mouseup(unclickPos);

Upvotes: 0

maerics
maerics

Reputation: 156434

This function demonstrates the general idea in modern, standards-compliant web browsers but there are many details (such as cross-browser awareness, the scroll view, etc.) that might be better handled with a framework such as jQuery:

(function() {
  var dragStart, dragStop;
  document.body.addEventListener('mousedown', function(e) {
    dragStart = [e.clientX, e.clientY];
  }, true);
  document.body.addEventListener('mouseup', function(e) {
    dragStop = [e.clientX, e.clientY];
    if ((dragStart[0] != dragStop[0]) && (dragStart[1] != dragStop[1])) {
      console.log("DRAGGED: [" + dragStart + "] => [" + dragStop + "]");
    }
  }, true);
})();

Note that you'll also want to check for "mousemove" events in between the "mouseup"/"mousedown" in case the latter two events happen to occur at the same location.

Upvotes: 1

Robin
Robin

Reputation: 21884

Pure javascript or jQuery?

If jQuery, you can access e.pageX and e.pageY for the click event.

http://docs.jquery.com/Tutorials:Mouse_Position

Upvotes: 0

Related Questions