JSFiddle - React, Tailwind, and code Playground

by Amir Sharifian

HTML

<div id="container">

</div>

CSS

#container {
  height: 1500px;
}

JavaScript

const actions = [];

// Get element xpath
function getXPathForElement(element) {
    const idx = (sib, name) => sib 
        ? idx(sib.previousElementSibling, name||sib.localName) + (sib.localName == name)
        : 1;
    const segs = elm => !elm || elm.nodeType !== 1 
        ? ['']
        : elm.id && document.getElementById(elm.id) === elm
            ? [`id("${elm.id}")`]
            : [...segs(elm.parentNode), `${elm.localName.toLowerCase()}[${idx(elm)}]`];
    return segs(element).join('/');
}

let throttle = (func, delay) => {
	let prev = Date.now() - delay;
  
  return (...args) => {
    let current = Date.now();
    if (current - prev >= delay) {
    	prev = current;
      func.apply(null, args);
    }
  }
};

// Track mouse movement
let handleMousemove = (event) => {
  //console.warn(`${event.x}:${event.y}`);
  document.body.innerText += `\n Mouse movement | Position: ${event.pageX}:${event.pageY} | Timestamp: ${new Date().getTime()}`;
};

document.addEventListener('mousemove', throttle(handleMousemove, 500));

// Track left click event
document.onclick = function(event) {
		//console.log("Click action");
		// Check is duplicate
    actions.push({
      type: "click",
      data: {
				position: {
					x: event.pageX,
        	y: event.pageY,
        },
        time: new Date().getTime(),
				xpath: getXPathForElement(event.target)
      }
    });

		document.body.innerText += `\n Clic | Position: ${event.pageX}:${event.pageY} | Timestamp: ${new Date().getTime()} | Element Xpath: ${getXPathForElement(event.target)}`;
}

// Track right click event
document.oncontextmenu = function(event) {
		///console.log("Right click action");
    
		// Check is duplicate
    actions.push({
      type: "contextmenu",
      data: {
        position: {
					x: event.pageX,
        	y: event.pageY,
        },
        time: new Date().getTime(),
				xpath: getXPathForElement(event.target)
      }
    });

		document.body.innerText += `\n Right click | Position:...