用户单击它时只获取文本值

com*_*psy 1 html javascript jquery

仅获取用户单击它的文本值

HTML代码

<body>
    <div id="test">
        <pre>
        zelketg  1
        gcaotydv  14
        cdbot_i 11
        pacdhss12  1
        boters  1
        <pre>  
    </div>
</body>
Run Code Online (Sandbox Code Playgroud)

在上面的代码我使用pre标签,我有一个很长的用户列表,所以我希望下一行的每个用户

当用户点击时zelketg,我只想zelketg在javascript警告框下而不是全文.

我尝试了下面的JavaScript,但它没有用,它给了我整个文本 div

$(document).click(function(event) {
    var text = $(event.target).text();
    alert(text);
});
Run Code Online (Sandbox Code Playgroud)

gur*_*372 6

pre标签的内容无法识别为单个节点,因此您需要进行一些预处理,以便将它们标识为单个节点.

var preNode = document.querySelector( "pre" );
function preCondition()
{
  var text = preNode.innerText;
  preNode.innerHTML = text.split("\n").map( s => "<div>" + s + "</div>" ).join( "" );
}
preCondition();
Run Code Online (Sandbox Code Playgroud)

现在,您可以在-tag上添加单击事件处理程序pre

preNode.addEventListener( "click", function(){
  console.log(event.target.innerHTML);
});
Run Code Online (Sandbox Code Playgroud)

演示

var preNode = document.querySelector( "pre" );
function preCondition()
{
  var text = preNode.innerText;
  preNode.innerHTML = text.split("\n").map( s => "<div>" + s + "</div>" ).join( "" );
}

preCondition();
preNode.addEventListener( "click", function(){
  console.log(event.target.innerHTML);
});
Run Code Online (Sandbox Code Playgroud)
<div id="test">
  <pre>
        zelketg  1
        gcaotydv  14
        cdbot_i 11
        pacdhss12  1
        boters  1
   </pre>
</div>
Run Code Online (Sandbox Code Playgroud)

  • 它的工作非常好,感谢这个很棒的解决方案 (2认同)