如何在 JavaScript 中迭代 TouchList 中触摸事件的所有触摸事件属性？-解网

问：

我试图理解触摸事件，但我无法让任何事情起作用。

我有一个非常简单的页面来测试这一点：

HTML格式：

<div id="TOUCHME"> TOUCH ME </div>
<div id="OUTPUT"></div>

JavaScript的：

const TOUCHME = document.getElementById('TOUCHME');
const OUTPUT = document.getElementById('OUTPUT');

TOUCHME.addEventListener('touchstart',(evt)=>{
    evt.preventDefault();
    let touches = evt.touches;
    for(let i=0; i<touches.length; i++){
        let newDiv = document.createElement('div');
        newDiv.appendChild(document.createTextNode(touches[i]));
        OUTPUT.appendChild(newDiv);
    }
});

但是，正如您可以猜到的那样，什么都没有显示。我什至引用了 MDN，它们有一个几乎相同的示例。

我在 StackOverflow 上找到了一些信息，但他们说做这样的事情：

var touch = event.touches[0];
var x = touch.pageX;
var y = touch.pageY;

这确实有效，但是如果一个人不知道这是您需要访问的内容怎么办？除了搜索 MDN 之外，一个人应该如何知道 MDN 的所有属性，除非他们可以迭代？touch[0]touch[0]TouchList

我也试过这个：

Object.entries(evt.touches)

和

Object.entries(evt.touches[0])

但这些都没有奏效;这意味着我无法遍历任何列表，因为它们的大小始终是 .0

那么，一个人如何迭代触摸的触摸属性呢？TouchList

JavaScript HTML 触摸事件

  const TOUCHME = document.getElementById('TOUCHME');
  const OUTPUT = document.getElementById('OUTPUT');

  TOUCHME.addEventListener('touchstart', (evt) => {
    evt.preventDefault();
    let touches = evt.touches;
    for (i = 0; i < touches.length; i++)
      OUTPUT.appendChild(
        document.createTextNode(
          touches.item(i).identifier + " "
        )
      )
  });

<div id="TOUCHME"> TOUCH ME </div>
<div id="OUTPUT"></div>

（i）如果您使用的是非接触式设备，请确保在开发工具中激活触摸模拟。例如，在Firefox中，这是在这里完成的：https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/#controlling-responsive-design-mode（搜索“启用/禁用触摸模拟”）

如何在 JavaScript 中迭代 TouchList 中触摸事件的所有触摸事件属性？

How do I iterate over all touch event properties in the TouchList for a touch event in JavaScript?

评论

评论