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

Question

In my HTML I have this tag hierarchy repeated a bunch:

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

When I am on a non-touch screen I have a hover effect which displays the a tag as a button to launch a link.

On a touch screen I want to add an eventListener to the entire figure which launches the href of its embedded a tag when its pressed.

This is what I've written, but it doesn't work:

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

There are a few things that needs to be fixed in your code:

• Your loop pass the element, not its index, so it needs to look like this

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

• To have access to its position index you could store it in a custom attribute. Note, I also removed the (i) from clickHandler , or else it will fire when add the handler.

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

• Then when clicked at, you can use the custom attribute to do something with

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

---

Stack snippet (disabled the touch detection for this sample to work)

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