使单个单词/字符可通过javascript点击

Question

说到Javascript，我是一个新手，我找不到这个问题的答案(或者可能我没有搜索正确的术语)。有没有办法在HTML中添加一个单词或字符?p比;标签可点击，这样javascript函数就可以对那个单词或字符起作用，而不是整个<p比;标签?>

谢谢你的帮助。

Answer 1

正如前面的评论者所提到的，您可以将文本包装在span(或任何内联元素)中，为span提供ID或类(或数据属性，在这种情况下对您有用)-将元素保存到JavaScript变量中，并使用事件侦听器侦听所需元素的单击。

let clickableText = document.querySelector( "#clickable" );
clickableText.addEventListener( "click", function() {
console.log( "Clicked!" );
})

<p>This is my paragraph. Click <span id="clickable" style="font-weight: 600; text-decoration: underline; cursor: pointer;">THIS</span>.</p>

Answer 2

您可以通过将可单击的文本包装在<span>元素中来实现这一点，如下所示:

document.querySelector("#clickable").onclick = () => alert("You clicked the element");

#clickable {
background-color: yellow;
}

<div>
<p>
This is a paragraph of text, with a <span id="clickable">clickable element</span>.
</p>
</div>