Question

在我的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)
    }
}

Answer 1

您的代码中需要修复一些事项：

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

然后单击时，您可以使用自定义属性执行

function clickHandler(e){
  alert(this.dataset.id)
}

Stack snippet （禁用此样本的触摸检测功能）

＆＃13;

//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)
    }
//}

＆＃13;

<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>

＆＃13;

在利用子元素的属性时，将eventListener添加到多个元素

1 个答案: