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)
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)
| 归档时间: |
|
| 查看次数: |
67 次 |
| 最近记录: |