Offset a mouse click to occur somewhere else

Question

Ok so just got a very strange requirement in an app that I am building. I need a mouse click to occur 50 px to the right of the cursor position. That is, when the user clicks in one place - the event should be registered 50 px to the right.

Is this even possible?

This does seem strange. Could you get away with a hidden element that extends 50px in the appropriate direction which you use to trap click events? — James, Apr 10 '17 at 21:06
You can fake it. Trap event.clientX and add 50 before doing anything on that spot. — inarilo, Apr 10 '17 at 21:17
inarilo, I suppose you mean preventDefault on the event itself and simulate an event on the desired spot? That could work too! — swelet, Apr 10 '17 at 21:34

score 1 · Accepted Answer · edited May 23 '17 at 12:25

You can do this by preventing pointer events on the body and then temporarily allowing them in a document.onclick handler. Then simulate a click using document.elementFromPoint (taken from this question). Just add 50 to the offsetX value of the initial click event.

script:

let $body = $('body');
$body.addClass('locked');

document.onclick = function(e) {
  $body.removeClass('locked');
  let el = document.elementFromPoint(e.offsetX + 50, e.offsetY);
  if (el) {
    el.click();
  }
  $body.addClass('locked');
};

css:

body.locked {
  pointer-events: none;
}

Offset a mouse click to occur somewhere else

1 Answers1

script:

css: