Question

我想从我点击的HTML文档中的单击元素中获取某个innerText。

相应的HTML看起来像这样：

!DOCTYPE html>
<html>
<head>
    <title>Some title</title>
</head>
<body>
    <ul class="categories">
        <li>
            <a href="http://www.example2.com/1">
            <div>
                <img src="http://www.example.com/someSource">
                <span>First</span>
            </div>
            </a>
        </li>

        <li>
            <a href="http://www.example2.com/1">
            <div>
                <img src="http://www.example.com/someSource">
                <span>Second</span>
            </div>
            </a>
        </li>

    </ul>
</body>
</html>

Javascript函数应该返回“First”或“Second”，具体取决于点击的链接。

我的基本想法是添加一个事件监听器并使用返回的事件来获取span元素的内容：

function(){
  document.addEventListener('click', function(e) {
    e = e || window.event;
    var spanText= e.path[i].innerText; //Don't know how to assign i correctly
    return spanText;
    }, false);
}

我的问题是我不知道如何定义 i 或者是否有比 .path [i] 更合适的东西。取决于我是单击图像还是文本。

Answer 1

将点击事件添加到列表项
在处理程序中，检索'span'子项并获取其文本

var lis = document.querySelectorAll('.categories li');
lis.forEach(function(el) {
  el.addEventListener('click', onClick, false);
})

function onClick(e) {
  var li = e.currentTarget;
  var span = li.querySelector('span');
  console.log(span.innerText);
}

<ul class="categories">
  <li>
    <a href="http://www.example2.com/1">
      <div>
        <img src="http://www.example.com/someSource">
        <span>First</span>
      </div>
    </a>
  </li>

  <li>
    <a href="http://www.example2.com/1">
      <div>
        <img src="http://www.example.com/someSource">
        <span>Second</span>
      </div>
    </a>
  </li>

</ul>

Answer 2

import numpy as np

a = np.arange(48, dtype=np.int64).reshape((3, 4, 4))
# or 
b = np.zeros((3, 4, 4), dtype=np.int64)

Answer 3

您可以检查单击的具体元素，然后返回其文本。如果您想了解一些其他信息，请使用data-属性并阅读target.dataset进行阅读。

  document.addEventListener('click', function(e) {
    var target = e.target;

    if(target.tagName === 'SPAN') {
        console.log(target.innerText);  
        return target.innerText;
    }
    
  }, false);

<ul class="categories">
        <li>
            <a href="#">
            <div>
                <img src="http://www.example.com/someSource">
                <span>First</span>
            </div>
            </a>
        </li>

        <li>
            <a href="#">
            <div>
                <img src="http://www.example.com/someSource">
                <span>Second</span>
            </div>
            </a>
        </li>

    </ul>

Answer 4

如果结构一致，那么<span>元素的总数将始终与<a>元素相同。

因此，如果您知道用户刚刚点击了第二个<a>，则您知道您需要返回的<span>是第二个<span>。

工作示例：

＆＃13;

var links = document.querySelectorAll('li a');
var spans = document.querySelectorAll('li div span');

function getTextContent(e) {
    e.preventDefault();
    var linksArray = Array.prototype.slice.call(links);
    var index = linksArray.indexOf(this);
    console.log(spans[index].textContent);
}

links.forEach(function(link){
    link.addEventListener('click', getTextContent, false);
});

＆＃13;

<ul class="categories">
        <li>
            <a href="http://www.example2.com/1">
            <div>
                <img src="http://www.example.com/someSource">
                <span>First</span>
            </div>
            </a>
        </li>

        <li>
            <a href="http://www.example2.com/1">
            <div>
                <img src="http://www.example.com/someSource">
                <span>Second</span>
            </div>
            </a>
        </li>
    </ul>

＆＃13;

Answer 5

抱歉我的语言不好..

我回复晚了。

也许它会帮助别人；

window.addEventListener("click", (event) => { //dblclick    
  let div = event.target.innerText; // <-- the code you want
  window.onClick(div);
});

还有..

function onClick(div) {
   console.log(`(Tıklandı-Clicked) innerText: ${div}`);
}

你想要的代码：let div = event.target.innerText;

如何从单击元素的相关节点获取innerHTML / innerText？

5 个答案: