javascript - How can I retrieve all mouse coordinates between mousedown to mouseup event - Stack Overflow

admin管理员组

文章数量:1278819

As per the jQuery docs below code can be used to capture mouseup and mouse down events. But my requirement is bit different

$("#dic").mouseup(function () {

}).mousedown(function () {

});  

But How can I calculate mouse moving co-ordinates between mousedown position to mouseup position. Please help me on this. How can I apply mousemove event between mousedown and mouseup

As per the jQuery docs below code can be used to capture mouseup and mouse down events. But my requirement is bit different

$("#dic").mouseup(function () {

}).mousedown(function () {

});  

But How can I calculate mouse moving co-ordinates between mousedown position to mouseup position. Please help me on this. How can I apply mousemove event between mousedown and mouseup

• javascript
• jquery

Share Improve this question Follow edited May 31, 2012 at 15:33 Exception asked May 31, 2012 at 15:25 ExceptionException 8,3892424 gold badges8888 silver badges141141 bronze badges 3

• 1 Do you need all coordinates between these events or just the two? – Matthew Riches Commented May 31, 2012 at 15:28
• 1 So which is it? Just the two, or all? – apsillers Commented May 31, 2012 at 15:33
• @apsillers I want to retrieve all the mouse moved co-ordinates from mousedown to mouseup events... – Exception Commented May 31, 2012 at 15:34

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

If you need to captue all points the mouse moves through during a drag, bind/unbind a new mousemove handler:

var allPoints = [];
$("#dic").mouseup(function (e) {
    $(this).unbind("mousemove", trackPoints);
}).mousedown(function (e) {
    $(this).bind("mousemove", trackPoints); 
});

function trackPoints(e) {
    allPoints.push({ x: e.pageX, y: e.pageY });
}

This way, trackPoints will start firing when the mouse is down and stop when it goes back up.

You may also want to add a if(e.which == 1) to the top of your mouseup and mousedown handlers so that they perform the bind for a left mouse button only, not middle or right buttons.

var X = [],
    Y = [],
    i = -1;
$("#dic").mouseup(function(e) {
    ++i;
    X[i] = e.pageX;
    Y[i] = e.pageY;
    // reset everything on mouseup
    X = [];
    Y = [];
    i = -1;
}).mousedown(function(e) {
    ++i;
    X[i] = e.pageX;
    Y[i] = e.pageY;
    console.log(X);
}).mousemove(function(e) {
    ++i;
    X[i] = e.pageX;
    Y[i] = e.pageY;
});

DEMO

var x = [], y = [], i = 0;

$("#dic").mouseup(function (e) {
    $('#status').html(e.pageX +', '+ e.pageY + ' up');
    x[i] = e.pageX;
    y[i++] = e.pageY;

    console.log(x);
    console.log(y);
});

$("#dic").mousedown(function (e) {
    $('#status').html(e.pageX +', '+ e.pageY + ' down');
    i = 0;
    x[i] = e.pageX;
    y[i++] = e.pageY;
});

$("#dic").mousemove(function (e) {
    $('#status').html(e.pageX +', '+ e.pageY + ' move');
    x[i] = e.pageX;
    y[i++] = e.pageY;
});

This will begin recording mouse positions on mousedown and you can see the output on the console on mouseup. Then you can calculate the distance as thecodeparadox described with the first and last items of the arrays, or any other points in between the start and end.

Code on JSFiddle

本文标签： javascriptHow can I retrieve all mouse coordinates between mousedown to mouseup eventStack Overflow