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
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.
Pure javascript or jQuery?
If jQuery, you can access e.pageX and e.pageY for the click event.
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);
