Mouse/Touch Event Simulation

simulate.js

/**
 * @desc It triggers mouse event.
 * @param {HTMLElement} element target DOM element
 * @param {string} type type of event
 * @param {number} x clientX of event
 * @param {number} y clientY of event
 */
export function simulateEvent(element, type, x, y) {
  const mouseEvent = new MouseEvent(type, {
    screenX: 0,
    screenY: 0,
    clientX: x,
    clientY: y,
    view: window,
    cancelable: true,
    bubbles: true,
  });

  element.dispatchEvent(mouseEvent);
}

/**
 * @desc It triggers touch events. Also supports multiple touch events.
 * @param {HTMLElement} element target DOM element
 * @param {string} type type of event
 * @param {Array} touches {x, y, id} position and identifier of the event
 */
export function simulateTouchEvent(element, type, touches) {
  const touchEvents = [];

  touches.forEach((touch) => {
    touchEvents.push(new Touch({
      clientX: touch.x,
      clientY: touch.y,
      identifier: touch.id,
      target: element,
    }));
  });

  element.dispatchEvent(new TouchEvent(type, {
    touches: touchEvents,
    view: window,
    cancelable: true,
    bubbles: true,
  }));
}