如何從單擊元素的相關節點獲取innerHTML/innerText？

我想從單擊的HTML文檔中的單擊元素中獲取某個innerText。如何從單擊元素的相關節點獲取innerHTML/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函數應該取決於點擊鏈接返回要麼「第一」或「第二」。

我的基本想法是添加事件偵聽器，並使用返回的事件獲得跨度元素的內容：

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); 
}

我的問題是，我不知道如何定義我或如果有什麼比.path [i]更適合使用。取決於我是否點擊圖片或文字。

來源

2017-01-19 SomewhereDave

添加單擊事件的列表項的處理程序
，檢索 '跨度' 的孩子，並得到其文本

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>

來源

2017-01-19 12:32:18 Giladd

function init(){ 
document.addEventListener('click', function(e) { 
    var link = e.target.closest('a'); 
    if(!link)return; 
    e.preventDefault(); 
    var text = link.textContent; 
    alert(text); 

    return spanText; 
    }); 
} 

init();

來源

2017-01-19 12:19:41 Smiranin

會發生什麼，如果圖像用戶點擊？ – Rounin

@Rounin我是修正代碼 – Smiranin

你可以檢查被點擊的具體元素，然後返回其文本。如果你想獲得一些附加信息 - 使用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>

來源

2017-01-19 12:38:09 VadimB

如果用戶點擊圖像會發生什麼？ – Rounin

檢查不會通過'if（target.tagName ==='SPAN'）。你試圖達到什麼樣的行爲？ – VadimB

我可能誤解了這個問題，但我認爲OP希望單擊*鏈接*來返回跨度中的單詞。（即，不要單擊跨度來返回跨度中的單詞）。 – Rounin

如果結構是一致的，則總是會有相同數量<span>元素<a>元件。

因此，如果您知道用戶只需點擊第二個<a>，就會知道您需要返回的<span>是第二個<span>。

工作實例：

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); 
 
});

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

來源

2017-01-19 12:54:24 Rounin

如何從單擊元素的相關節點獲取innerHTML/innerText？

回答

相關問題