在使用子元素的属性时向多个元素添加 eventListener答案

【问题标题】：Adding an eventListener to multiple elements while utilizing an attribute from a child element在使用子元素的属性时向多个元素添加 eventListener
【发布时间】：2018-03-21 17:34:02
【问题描述】：

在我的 HTML 中，这个标签层次结构重复了一堆：

<figure>
    <div class="proj-photo">
        <img>
        <div></div>
        <a></a>
    </div>
    <figcaption></figcaption>
</figure>

当我在非触摸屏上时，我有一个悬停效果，它将 a 标签显示为启动链接的按钮。

在触摸屏上，我想在整个图形中添加一个 eventListener，当按下它时，它会启动嵌入的 a 标签的 href。

这是我写的，但它不起作用：

const isTouchScreen = window.matchMedia( "(hover: none)" )

if (isTouchScreen.matches){
    console.log("Touch screen in use")
    const figures = document.querySelectorAll("figure")
    const projLinks = document.querySelectorAll("figure > div > a")
    var i = 0
    function clickHandler(i){
      window.open(projLinks[i], '_blank')
    }

    function assignListeners(i){
        figures[i].addEventListener('click', clickHandler(i))
    }

    for (i in figures) {
        assignListeners(i)
    }
}

【问题讨论】：

我认为您可以将您的 div 包裹在 <a> 标签中，或者将 div 完全替换为 <a> 标签并将其用作 div。这将使操作更简单。
将figures[i].addEventListener('click', clickHandler(i)) 替换为figures[i].addEventListener('click', clickHandler)。 clickHandler(i) 是 undefined。

标签： javascript responsive-design addeventlistener dom-events

【解决方案1】：

您的代码中有几处需要修复：

你的循环传递的是元素，而不是它的索引，所以它需要看起来像这样
```
for( var i = 0; i < figures.length; i++) {
   assignListeners(i)
}
```
要访问其位置索引，您可以将其存储在自定义属性中。 注意，我还从clickHandler 中删除了(i)，否则它会在添加处理程序时触发。
```
function assignListeners(i){
  figures[i].setAttribute('data-id', i);
  figures[i].addEventListener('click', clickHandler);
}
```
然后在点击的时候，就可以使用自定义属性来做一些事情了
```
function clickHandler(e){
  alert(this.dataset.id)
}
```

Stack sn-p （禁用了此示例的触摸检测）

//const isTouchScreen = window.matchMedia( "(hover: none)" )

//if (isTouchScreen.matches){
    //console.log("Touch screen in use")
    const figures = document.querySelectorAll("figure")
    const projLinks = document.querySelectorAll("figure > div > a")
    var i = 0
    function clickHandler(e){
      alert(this.dataset.id)
    }

    function assignListeners(i){
        figures[i].setAttribute('data-id', i);
        figures[i].addEventListener('click', clickHandler);
    }

    for( var i = 0; i < figures.length; i++) {
        assignListeners(i)
    }
//}

<figure>
    <div class="proj-photo">
        <img src="http://placehold.it/100">
        <div></div>
        <a href="#">Link</a>
    </div>
    <figcaption></figcaption>
</figure>
<figure>
    <div class="proj-photo">
        <img src="http://placehold.it/100">
        <div></div>
        <a href="#">Link</a>
    </div>
    <figcaption></figcaption>
</figure>

【讨论】：