Passing event and variable to mousemove event handler in jQuery

Question

I'm trying to create a drag function using a combination of jQuery mousedown/move/up events, during which I'm trying to pass the starting (cursor) position of the mousedown event to the mousemove event handler but am getting the error

Argument of type mousemove is not assignable to the type 'PlainObject...'

Here's my code...

module controls.draganddrop {

    export function init() {
        $("#mainContent").on("mousedown", ".itemList > ul > li > p", mouseDown);
        $("#mainContent").on("mouseup", ".itemList > ul > li > p", mouseUp);
    }

    function mouseDown(e) {
        var startPosition: object = { x: e.pageX, y: e.pageY };
        $(".itemList > ul > li > p").on("mousemove", mouseMove(event, startPosition));
    }

    function mouseMove(e, startPosition) {
        console.log("pageX: " + e.pageX + ", pageY: " + e.pageY);
    }

    function mouseUp(e) {
        $(".itemList > ul > li > p").off("mousemove", mouseMove);
    }
}

The error is on "mousemove" within the mouseDown function. Clearly I've misunderstood something in the jQuery documentation and/or solutions in similar problems, what am I doing wrong?

The duplicate I marked references a click event, but the issue is the same. You're assigning the *returned value* from `mouseMove(event, startPosition)` (ie. `undefined`) to the event handler, not that function itself. You need to wrap that function call in another anonymous function. — Rory McCrossan, Apr 05 '18 at 13:53
That's certainly resolved the issue, the only problem now is I can't remove the mousemove event handler as it's an anonymous function, is there another way of achieving this? — James Morrison, Apr 05 '18 at 13:59
I think `$(".itemList > ul > li > p").off("mousemove");` will remove all handlers from `mousemove` — Scaramouche, Apr 05 '18 at 14:01

Matt · Answer 1 · 2018-04-05T13:55:50.550

0

Try this

$(".itemList > ul > li > p").on("mousemove", function(event){ mouseMove(event, startPosition)});

edited Apr 05 '18 at 13:55

answered Apr 05 '18 at 13:54

Matt

2,096
14
20

Note that this is unsupported in any version of IE. – Rory McCrossan Apr 05 '18 at 13:55
Is there a work-around that is supported in IE? – James Morrison Apr 05 '18 at 14:04

Passing event and variable to mousemove event handler in jQuery

1 Answers1