JSFiddle - React, Tailwind, and code Playground

by fredrik

HTML

<!doctype html>
<html>
    <head><title></title></head>
    <body>
        <div style="margin: 10px 0 30px 100px; background: red; height: 300px" id="btn">Button</div> 
<a href="javascript:void(0)" id="btn2">Button2</a>           
    </body>
</html>

JavaScript

var btn = document.getElementById('btn'),
    btn2 = document.getElementById('btn2');

function getOffset(elem) {
  var el = elem,
      x = y = 0;

  while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
    x += el.offsetLeft - el.scrollLeft;
    y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
  }

  return { x: x, y: y };
}

function getEventOffset(e) {
  var el = e.target,
      x = 0,
      y = 0,
      elemOffset = getOffset(el);
    
  x = e.clientX - elemOffset.x;
  y = e.clientY - elemOffset.y;

  return { x: x, y: y };
}

btn.addEventListener('click', function (e) {
    console.log('clientX', e.clientX);
    console.log('insideX', getEventOffset(e).x);
});

btn2.addEventListener('click', function (e) {
    var evt = document.createEvent("MouseEvents"),
        insideX = 122,
        clientX = getOffset(btn).x + insideX;
               
    evt.initMouseEvent("click", true, true, window, 0, 0, 0, clientX, 0, false, false, false, false, 0, null);
    btn.dispatchEvent(evt);
});