クリックした要素の関連ノードから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>

A Javascriptの機能がクリックしたリンクに応じて、「最初の」または「セカンド」のいずれかを返す必要があります。

私の基本的な考え方は、イベントリスナーを追加し、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); 
}

私の問題は、私はを定義する方法がわからないということです私はかもしも、.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

構造が一致している場合は、常に<a>要素として<span>同じ数の要素が存在することになります。

したがって、ユーザーが2番目の<a>をクリックしたことがわかっている場合は、<span>を返す必要があります。これは2番目の<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を取得するにはどうすればいいですか？

答えて

関連する問題