JSFiddle - React, Tailwind, and code Playground

by holden321

HTML

<div></div>

CSS

div {
    width:100px;
    height:100px;
    border:1px solid black;
    background:red;
}

JavaScript

var div=document.getElementsByTagName("div")[0];
div.onmousedown=function(e){
    console.log(e);
};
dispatchEvent(div,mouseEvent("mousedown", 1, 50, 1, 50));
//console.log(div);

function mouseEvent(type, sx, sy, cx, cy) {
  var evt;
  var e = {
    bubbles: true,
    cancelable: (type != "mousemove"),
    view: window,
    detail: 0,
    screenX: sx, 
    screenY: sy,
    clientX: cx, 
    clientY: cy,
    ctrlKey: false,
    altKey: false,
    shiftKey: false,
    metaKey: false,
    button: 0,
    relatedTarget: undefined
  };

    evt = document.createEvent("MouseEvents");
    evt.initMouseEvent(type, 
      e.bubbles, e.cancelable, e.view, e.detail,
      e.screenX, e.screenY, e.clientX, e.clientY,
      e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
      e.button, document.body.parentNode);
    
  return evt;
}
function dispatchEvent (el, evt) {
  if (el.dispatchEvent) {
    el.dispatchEvent(evt);
  } else if (el.fireEvent) {
    el.fireEvent('on' + type, evt);
  }
  return evt;
}