使用下拉菜单时Clickevent显示错误位置

Question

我想1:1重播所有点击事件。不幸的是，它不适用于下拉菜单。每当我在下拉列表中选择一个值时，它都会显示错误的位置（请随意在我的代码片段中测试它）。我从 https://stackoverflow.com/a/61732450 获取了事件处理程序，它对我的所有工作都很有魅力，除了这里。

左：我所看到的 右：我想要的

非常感谢

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>

Answer 1

使用

mousedown

而不是

click

似乎适用于初始下拉点击，但不适用于

<option>

的

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("mousedown", 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>