javascript - 在利用子元素的属性时将事件监听器添加到多个元素

Question

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

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

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

在触摸屏上，我想向整个图形添加一个事件监听器，该事件监听器在按下时启动其嵌入的 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)
  }
  

• 要访问其位置索引，您可以将其存储在自定义属性中。 注意，我还从 clickHandler 中删除了 (i)，否则添加处理程序时它将触发。

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

• 然后，当点击时，您可以使用自定义属性来执行某些操作

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

<小时/>

堆栈片段(禁用此示例的触摸检测)

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