如何在JavaScript节点列表的每个元素中添加功能

如何解决如何在JavaScript节点列表的每个元素中添加功能

这是工作代码示例

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<div id="root"></div>

<script type="text/babel">
  function App() {
    return (
      <div>Sample Component</div>
    );
  }

  ReactDOM.render(<App/>,document.getElementById("root"))
</script>

和HTML

const test = document.getElementById('test')
const time = 1000
var timer;

test.addEventListener('touchstart',hlt)
test.addEventListener('touchend',endt)


function onlongtouch(){
    console.log('it has been 600 milisecond')
}

function hlt(){
  console.log('test');
  timer = setTimeout(onlongtouch,time)
  console.log(timer)

}

function endt(){
    if(timer){
        clearTimeout(timer)
    }
}

所以我要使用id为“ test”的单个元素并向其中添加触摸功能，但是如果我将 <div class="data" id="test"> <div class="num"><p>1</p></div> <div class="title"><p>Crush It</p></div> <div class="author"><p>Gary Vaynerchunk</p></div> <div class="ISBN"><p>132132312</p></div> </div> <div class="data"> <div class="num"><p>2</p></div> <div class="title"><p>Crush It</p></div> <div class="author"><p>Gary Vaynerchunk</p></div> <div class="ISBN"><p>132132312</p></div> </div> <div class="data"> <div class="num"><p>3</p></div> <div class="title"><p>Crush It</p></div> <div class="author"><p>Gary Vaynerchunk</p></div> <div class="ISBN"><p>132132312</p></div> </div> 替换为const test = document.getElementById('test')会导致该问题，而不是单个元素，它是一个充满元素的整个节点列表。如何为所有功能添加功能？

提前谢谢！

解决方法

let elements = [...document.querySelectorAll('.data')];
for(let el of elements) {
  el.addEventListener('touchstart',hlt)
  el.addEventListener('touchend',endt)
}