代码之家 › 专栏 › 技术社区 › Matthew Lacey

利用子元素的属性向多个元素添加eventListener

dom-events addeventlistener responsive-design javascript

0

Matthew Lacey · 技术社区 · 8 年前

在HTML中,我重复了一系列标记层次结构:

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

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

在触摸屏上,我想在整个图中添加一个eventListener,该图将启动其嵌入的一按下时标记。

这是我写的,但它不起作用:

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

1 回复 | 直到 8 年前

1

Asons Oliver Joseph Ash 8 年前

您的代码中需要修复以下几点:

您的循环传递的是元素,而不是其索引,因此它需要如下所示
```
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)
}

堆栈代码段 (禁用此样本的触摸检测以使其工作)

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