<div style="height: 200px">
  <p>Drag the ball.</p>

  <img src="https://js.cx/clipart/ball.svg" style="cursor:pointer" width="40" height="40" id="ball">

  <textarea id="text" style="display:block;width:300px;height:100px"></textarea>
</div>

    #ball {
      touch-action: none;
    }

    ball.onpointerdown = log;
    ball.onpointerup = log;
    ball.onpointermove = log;
    ball.onpointercancel = log;

    ball.ondragstart = () => false;

    let lastEventType;
    let n = 1;
    function log(event) {
      if (lastEventType == event.type) {
        n++;
        text.value = text.value.replace(/.*\n$/, `${event.type} * ${n}\n`);
        return;
      }
      lastEventType = event.type;
      n = 1;
      text.value += event.type + '\n';
      text.scrollTop = 1e9;
    }