如何在移动设备的 JavaScript 中查看光标在哪个 div 上？答案

【问题标题】：How to see which div the cursor is on in JavaScript for mobile devices?如何在移动设备的 JavaScript 中查看光标在哪个 div 上？
【发布时间】：2020-05-19 11:17:59
【问题描述】：

我正在开发一款游戏，我想使用 JavaScript 查看光标位于哪个 div 上。这是页面的早期访问版本：https://gerhardadler.no/make_it_rain.html

这是我目前拥有的适用于电脑的东西。

HTML：

<div onmouseover="kolonne(1)" id="kolonne_en"></div>
<div onmouseover="kolonne(2)" id="kolonne_to"></div>
<div onmouseover="kolonne(3)" id="kolonne_tre"></div>
<div onmouseover="kolonne(4)" id="kolonne_fire"></div>
<div onmouseover="kolonne(5)" id="kolonne_fem"></div>

JavaScript：

function kolonne(kolonne) {

 if (kolonne == 1) {
 spillerElem.style.left = "0px";
 pos = 0;

 } else if (kolonne == 2) {
    spillerElem.style.left = "100px";
    pos = 100;
   } else if (kolonne == 3) {
      spillerElem.style.left = "200px";
      pos = 200;
     } else if (kolonne == 4) {
        spillerElem.style.left = "300px";
        pos = 300;
       } else if (kolonne == 5) {
          spillerElem.style.left = "400px";
          pos = 400;
         } 

}

有人有什么建议吗？

【问题讨论】：

标签： javascript android html ios mobile

【解决方案1】：

我认为如果你使用TouchEvents 方法会更好 https://www.w3schools.com/jsref/obj_touchevent.asp

【讨论】：

【解决方案2】：

您可以尝试使用Touch events。为所有元素添加一个公共类，然后使用querySelector 获取它们。迭代它并附加触摸事件

doucment.querySelectorAll('.elem').forEach((item) => {

  item.addEventListener('touchstart', (evt) => {
    const getVal = this.dataset.kolonner;
    // rest of the code

  })
})

<div data-kolonne="1" class='elem' id="kolonne_en"></div>
<div data-kolonne="2" class='elem' id="kolonne_to"></div>
<div data-kolonne="3" class='elem' id="kolonne_tre"></div>
<div data-kolonne="4" class='elem' id="kolonne_fire"></div>
<div data-kolonne="5" class='elem' id="kolonne_fem"></div>

【讨论】：