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

Posted 2023-05-06

【中文标题】如何在移动设备的 JavaScript 中查看光标在哪个 div 上？

【英文标题】：How to see which div the cursor is on in JavaScript for mobile devices?

【发布时间】：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;
          

有人有什么建议吗？

【参考方案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>