Click event - get the target where the mousedown started instead of the mouseup

Question

In a click event (attached to document) I want to figure out the target when the user started pressing the mousebutton.

Example:

• User presses mousebutton on a custom popup
• User moves the mouse outside the popup and let go

In that case the code below will return a target outside the popup, but I want to figure out if it started within the popup.

$(document).click(function(e)
{
    // will return the target during *releasing the mouse button*
    // but how to get the target where the *mouse press started*
    console.log(e.target); 
}

Of course I could track this manually by listening to mousedown and saving this within a variable - but I rather have something native, because:

• less code
• I might be missing edge cases

Both Jquery or vanilla JavaScript answers are good to me (but preference vanilla)

Answer 1

You could use mousedown together with a mouseup function, and have them both saving their targets to a global variable, then compare them in an if statement.

let downTarget, upTarget;

$(document).mousedown(function(e) {
    downTarget = e.target;
});

$(document).mouseup(function(e) {
    upTarget = e.target;
});

if(upTarget === downTarget){ 
    *do stuff*
};