代码之家 › 专栏 › 技术社区 › Aurelian Spodarec

Vanilla javascript-选择“this”只包含事件冒泡的特定元素

javascript-events javascript

Aurelian Spodarec · 技术社区 · 6 年前

使用普通的Javascript ES5..

如何选择悬停的卡并获取它的值?当鼠标悬停在其他元素上时,它们的值是多少?

使用起泡方法。

这是密码笔: 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);
        }

  });

});

2 回复 | 直到 6 年前

Rick Gal Koren 6 年前

检查 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>

brk 6 年前

只能选择 organic-card 并向其中添加事件侦听器。

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>