查找此元素内的文本

Question

我想做一个相当简单的操作：你点击一个 li，你得到里面的文本，使用 JavaScript（不是 JQuery）。我无法弄清楚（或找出）的是如何获得 innerHTML。

function enable() {
  document.addEventListener('click', e => {
    if (e.target.classList.contains('refine-menu-li')) {
      var selected = this.innerHTML;
      console.log('stuff'); // Working
      console.log(selected); // Not working
    } 
  });
}

问题是我正在使用 class 并因此需要 for 循环吗？还是 this 尝试和使用是一件愚蠢的事情？

谢谢！

Answer 1

箭头函数从它们声明的上下文中捕获 this。

this.innerHTML 不是您要查找的innerHTML。

你可能想要 e.target.innerHTML.

如果您没有使用箭头函数，那么 this 将不是您想要的值。事件处理程序在它们绑定到的元素的上下文中调用（document 在这种情况下），而不是触发事件的元素。

Answer 2

试试这个

function enable() {
  document.addEventListener('click', e => {
    
    var current = e.target;
    
    if (e.target.classList.contains('refine-menu-li')) {
      var selected = current.innerHTML;
      console.log('stuff'); // Working
      console.log(selected); // Not working
    } 
  });
}

enable();

<ul>
  <li class='refine-menu-li a'>1 </li>
  <li class='refine-menu-li b '>2</li>
  <li class='refine-menu-li c '>3</li>
  <li class='refine-menu-li d'>4</li>
</ul>

Answer 3

您可以尝试这样的操作，而不使用箭头函数：

 document.getElementById("js-list")
         .addEventListener("click",function(e) {
            if(e.target && e.target.nodeName == "LI") {
              console.log(e.target.innerHTML);
            }
         });

<ul id="js-list">
   <li>value1</li>
   <li>value2</li>
   <li>value3</li>
</ul>

查找此元素内的文本

Finding the text inside this element

javascript

innerhtml

addeventlistener