HTML Mouse Hold And Unhold Event

index.css

#listener {
  width: 45px;
  height: 45px;
  border: 1px solid black;
}

index.html

<div>
  <div id="listener">
  
  </div>
</div>

index.js

function prepareElementForHoldEvent(el) {
  const mousehold = new MouseEvent('mousehold', {
    bubbles: false,
  });

  const mouseholdmove = new MouseEvent('mouseholdmove', {
    bubbles: false,
  });

  const mouseunhold = new MouseEvent('mouseunhold', {
    bubbles: false,
  });

  let interval = undefined;
  let isHeld = false;

  function mousedown(ev) {
    interval = setTimeout(() => {
      el.dispatchEvent(mousehold);
      isHeld = true;
      interval = undefined;
    }, 500);
  }

  function mousemove(ev) {
    if (isHeld) {
      el.dispatchEvent(mouseholdmove);
    }
  }

  function mouseup(ev) {
    if (interval) {
      // if there is an interval clear it
      clearInterval(interval);
    }

    if (isHeld) {
      // dispatch this event only if it's held
      el.dispatchEvent(mouseunhold);
      isHeld = false;
    }
  }

  el.addEventListener('mousedown', mousedown);
  document.addEventListener('mousemove', mousemove);
  document.addEventListener('touchmove', mousemove);
  el.addEventListener('touchstart', mousedown);

  document.addEventListener('mouseup', mouseup);
  document.addEventListener('touchend', mouseup);
  document.addEventListener('mouseleave', mouseup);

  return function unRegister() {
    document.removeEventListener('mousemove', mousemove);
    document.removeEventListener('touchmove', mousemove);
    el.removeEventListener('mousedown', mousedown);
    el.removeEventListener('touchstart', mousedown);
    document.removeEventListener('mouseup', mouseup);
    document.removeEventListener('touchend', mouseup);
    document.removeEventListener('mouseleave', mouseup);
  };
}

// Usage

const el = document.getElementById('listener');

prepareElementForHoldEvent(el);

el.addEventListener('mousehold', function (ev) {
  console.log('mousehold');
});

el.addEventListener('mouseholdmove', function (ev) {
  console.log('mousehold moveeee');
});

el.addEventListener('mouseunhold', function (ev) {
  console.log('mouseunhold');
});

index.ts

function prepareElementForHoldEvent(
  el: HTMLElement,
  options: { holdDelay: number } = { holdDelay: 150 }
): () => void {
  let interval: undefined | NodeJS.Timeout = undefined;
  let isHeld = false;

  function mousedown(ev: MouseEvent | TouchEvent) {
    interval = setTimeout(
      () => {
        interval = undefined;
        const mousehold = new CustomEvent("mousehold", {
          bubbles: false,
          detail: ev,
        });
        el.dispatchEvent(mousehold);
        isHeld = true;
      },
      typeof options.holdDelay === "number" ? options.holdDelay : 150
    );
  }

  function mousemove(ev: MouseEvent | TouchEvent) {
    if (isHeld) {
      const mouseholdmove = new CustomEvent("mouseholdmove", {
        bubbles: false,
        detail: ev,
      });
      el.dispatchEvent(mouseholdmove);
    }
  }

  function mouseup(ev: MouseEvent | TouchEvent) {
    if (interval) {
      // if there is an interval clear it
      clearInterval(interval);
    }

    if (isHeld) {
      const mouseunhold = new CustomEvent("mouseunhold", {
        bubbles: false,
        detail: ev,
      });
      // dispatch this event only if it's held
      el.dispatchEvent(mouseunhold);
      isHeld = false;
    }
  }

  el.addEventListener("mousedown", mousedown);
  document.addEventListener("mousemove", mousemove);
  document.addEventListener("touchmove", mousemove);
  el.addEventListener("touchstart", mousedown);

  document.addEventListener("mouseup", mouseup);
  document.addEventListener("touchend", mouseup);
  document.addEventListener("mouseleave", mouseup);

  return function unRegister(): void {
    document.removeEventListener("mousemove", mousemove);
    document.removeEventListener("touchmove", mousemove);
    el.removeEventListener("mousedown", mousedown);
    el.removeEventListener("touchstart", mousedown);
    document.removeEventListener("mouseup", mouseup);
    document.removeEventListener("touchend", mouseup);
    document.removeEventListener("mouseleave", mouseup);
  };
}