javascript - 使用Javascript获取点击元素的属性？

Question

我想获取被单击的 div 的“name”属性，并将其用于使用普通 Javascript 的另一个函数。我尝试了 Stack Overflow 上找到的多种解决方案，但没有任何效果。有人可以帮忙吗？

这是我尝试过的(对我来说有意义的版本):

let navLinks = document.querySelectorAll(".navbar .item");
navLinks.forEach(function(link) {
  link.addEventListener("click", function(e) {
    let attr = e.target.getAttribute('name');
    console.log(attr); //logs null

    //openPage(".home");
  });
});

<nav class="navbar">
  <div class="container">
    <div name="home" class="item active">
      <div><img src="img/icons/home1.png"></div>
      <div>Home</div>
    </div>
    <div name="faq" class="item">
      <div><img src="img/icons/faq2.png"></div>
      <div>FAQ</div>
    </div>
    <div name="calc" class="item cta_calc">
      <div><img src="img/icons/dash1.png"></div>
    </div>
    <div name="about" class="item">
      <div><img src="img/icons/info3.png"></div>
      <div>About</div>
    </div>
    <div name="contact" class="item">
      <div><img src="img/icons/info2.png"></div>
      <div>Contact</div>
    </div>
  </div>
</nav>

Answer 1

使用 Event.currentTarget 而不是目标 :

The currentTarget read-only property of the Event interface identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to Event.target, which identifies the element on which the event occurred and which may be its descendant.

let attr = e.currentTarget.getAttribute('name');

let navLinks = document.querySelectorAll(".navbar .item");        
navLinks.forEach(function(link){
  link.addEventListener("click",function(e){
    let attr = e.currentTarget.getAttribute('name');
    console.log(attr); //logs null

    //openPage(".home");
  });
});

<nav class="navbar">
    <div class="container">
        <div name="home" class="item active">
            <div><img src="img/icons/home1.png"></div>
            <div>Home</div>
        </div>
        <div name="faq" class="item">
            <div><img src="img/icons/faq2.png"></div>
            <div>FAQ</div>
        </div> 
        <div name="calc" class="item cta_calc">
            <div><img src="img/icons/dash1.png"></div>
        </div> 
        <div name="about" class="item">
            <div><img src="img/icons/info3.png"></div>
            <div>About</div>
        </div> 
        <div name="contact" class="item">
            <div><img src="img/icons/info2.png"></div>
            <div>Contact</div>
        </div>
    </div>       
</nav>

或:您可以简单地使用this关键字:

let attr = this.getAttribute('name');

let navLinks = document.querySelectorAll(".navbar .item");        
navLinks.forEach(function(link){
  link.addEventListener("click",function(e){
    let attr = this.getAttribute('name');
    console.log(attr); //logs null

    //openPage(".home");
  });
});

<nav class="navbar">
    <div class="container">
        <div name="home" class="item active">
            <div><img src="img/icons/home1.png"></div>
            <div>Home</div>
        </div>
        <div name="faq" class="item">
            <div><img src="img/icons/faq2.png"></div>
            <div>FAQ</div>
        </div> 
        <div name="calc" class="item cta_calc">
            <div><img src="img/icons/dash1.png"></div>
        </div> 
        <div name="about" class="item">
            <div><img src="img/icons/info3.png"></div>
            <div>About</div>
        </div> 
        <div name="contact" class="item">
            <div><img src="img/icons/info2.png"></div>
            <div>Contact</div>
        </div>
    </div>       
</nav>