Question

使用Vanilla JavaScript ES5。

如何选择悬停的卡并获得其价值？当将鼠标悬停在其他元素上时，它们的价值是什么？

使用冒泡方法。

这是codepen：https://codepen.io/Aurelian/pen/djYLxx?editors=0010

这是HTML：

<div class="organic-body" data-color="#1f2f1e" style="background-color: rgb(31, 51, 34);">
<div class="container">

  <h5>Hover to change color</h5>

  <div class="organic-list">
  <a href="#" class="organic-card js-organic-card-hover" data-color="red">
    <h2>Color red</h2>
  </a>

  <a href="#" class="organic-card js-organic-card-hover" data-color="blue">
    <h2>Color blue</h2>
  </a>

  <a href="#" class="organic-card js-organic-card-hover" data-color="green">
    <h2>Color green</h2>
  </a>
  </div>

</div>
</div>

这是JavaScript：

document.addEventListener('DOMContentLoaded', function () {

  // Select each item
  var organicBody = document.querySelector(".organic-body"),
      organicList = document.querySelector(".organic-list"),
      organicCard = document.querySelectorAll(".organic-card");

  // Add event listener to each item
   organicList.addEventListener('mouseover', function(e) {   

        if(e.target.className === 'organic-card') {
           var text = this.innerText;
           console.log(text);
        }

  });

});

Answer 1

通过以下方法检查e.target.parentNode是否具有特定的class：

parent.className.indexOf('organic-card') > -1

...然后得到innerText中的parentNode：

document.addEventListener('DOMContentLoaded', function() {
  // Select each item
  var organicBody = document.querySelector(".organic-body"),
    organicList = document.querySelector(".organic-list"),
    organicCard = document.querySelectorAll(".organic-card");

  // Add event listener to each item
  organicList.addEventListener('mouseover', function(e) {
    var parent = e.target.parentNode;
    
    if (parent.className.indexOf('organic-card') > -1) {
      var text = parent.innerText;
      console.log(text);
    }
  });
});

<div class="organic-body" data-color="#1f2f1e" style="background-color: rgb(31, 51, 34);">
  <div class="container">
    <h5>Hover to change color</h5>
    <div class="organic-list">
      <a href="#" class="organic-card js-organic-card-hover" data-color="red">
        <h2>Color red</h2>
      </a>
      <a href="#" class="organic-card js-organic-card-hover" data-color="blue">
        <h2>Color blue</h2>
      </a>
      <a href="#" class="organic-card js-organic-card-hover" data-color="green">
        <h2>Color green</h2>
      </a>
    </div>
  </div>
</div>

Answer 2

您只能选择organic-card dom并为其添加事件监听器。

var organicCard = document.querySelectorAll(".organic-card");
organicCard.forEach(function(item) {
  item.addEventListener('mouseover', function(e) {
    console.log(e.target.innerHTML)

  })
})

<div class="organic-body" data-color="#1f2f1e" style="background-color: rgb(31, 51, 34);">
  <div class="container">

    <h5>Hover to change color</h5>

    <div class="organic-list">
      <a href="#" class="organic-card js-organic-card-hover" data-color="red">
        <h2>Color red</h2>
      </a>

      <a href="#" class="organic-card js-organic-card-hover" data-color="blue">
        <h2>Color blue</h2>
      </a>

      <a href="#" class="organic-card js-organic-card-hover" data-color="green">
        <h2>Color green</h2>
      </a>
    </div>

  </div>
</div>

Vanilla JavaScript-通过事件冒泡选择“仅此”特定元素

2 个答案: