Clickevent shows wrong position when using dropdown

I want to replay 1:1 the all click events. Unfortunately, it doesn’t work for a dropdown. Whenever I select a value in a dropdown, it shows the wrong position (feel free to test it in my code snipped). I took the event handler from https://stackoverflow.com/a/61732450 and it worked like a charm for all my work, except here.

Left: What I see
Right: What I want

enter image description here

Thank you very much 

let touch_positions = [];
function process_touchevent(e) {
  if (
    e.type == "touchstart" ||
    e.type == "touchmove" ||
    e.type == "touchend" ||
    e.type == "touchcancel"
  ) {
    var evt = typeof e.originalEvent === "undefined" ? e : e.originalEvent;
    var touch = evt.touches[0] || evt.changedTouches[0];
    x = touch.pageX;
    y = touch.pageY;
  } else if (
    e.type == "click" ||
    e.type == "mousedown" ||
    e.type == "mouseup" ||
    e.type == "mousemove" ||
    e.type == "mouseover" ||
    e.type == "mouseout" ||
    e.type == "mouseenter" ||
    e.type == "mouseleave"
  ) {
    x = e.clientX;
    y = e.clientY;
  }
  touch_positions.push({ x, y, type: e.type, date: new Date() });

  var elemDiv = document.createElement("div");
  elemDiv.style.cssText =
    "position:absolute;width:10px;height:10px;border-radius: 10px;opacity:0.3;z-index:3;background:red;";
  let position_text = "left:" + x + "px;top:" + y + "px;";
  elemDiv.style.cssText += position_text;
  document.body.appendChild(elemDiv);
}

window.addEventListener("touchstart", process_touchevent, false);
window.addEventListener("touchmove", process_touchevent, false);
window.addEventListener("touchcancel", process_touchevent, false);
window.addEventListener("touchend", process_touchevent, false);
window.addEventListener("click", process_touchevent, false);

function draw_all_touch_positions() {
  touch_positions.forEach(function (li) {
    var elemDiv = document.createElement("div");
    elemDiv.style.cssText =
      "position:absolute;width:10px;height:10px;border-radius: 10px;opacity:0.3;z-index:3;background:red;";
    let position_text = "left:" + li.x + "px;top:" + li.y + "px;";
    elemDiv.style.cssText += position_text;
    document.body.appendChild(elemDiv);
  });
  touch_positions = [];
}
<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab" selected="">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<button onclick='draw_all_touch_positions()'>Draw</button>