当您在所有浏览器中双击某个单词时，它们会自动突出显示单击下的单词。但是有没有可能找到一种方法让完全相同的事情发生在单击一次？
我想这涉及的事情可能是： - 文本范围的东西； - 对所有段落（或整个正文或 div）的 onclick 做出反应，......但我还没有找到任何地方说明如何告诉浏览器：
“嘿！请在鼠标正下方突出显示文本……现在……尽管我只是单击，而不是双击。”
只是为了澄清：我不是要求突出显示 div 或段落中的整个文本（这相当简单，在 stackoverflow 上给出了许多解释）。我也不想为每个单词插入十亿个跨度。我希望找到与在浏览器中双击文本时获得的完全相同的功能，但只需单击一次。
是的，我打算然后对选定的文本做一些事情。
【问题讨论】：
标签： javascript html text highlight textrange
与@Sindre 的概念相同，当鼠标悬停在
上时，将文本拆分为单词，并用于渲染它们。当点击这些时，高亮它们。
在我下面的jsfiddle中，单击一个单词，所有相同的单词都会突出显示。 您可以更改与选择的设置进行比较的方式，例如。与索引而不是单词本身进行比较，以单独突出显示单个单词。
此外，我没有使用鼠标悬停，而是单击。所以你应该点击
来选择（激活，使颜色为红色）它，然后选择一个单词。 jsfiddle here
// main code
<div
@click='select'
:class='cls'>
<p v-if='!split'> {{data}} </p>
<p v-else>
<span
v-for='word in spdata'
:class='chosen(word)'
@click='choose'>
{{word}}
</span>
</p>
</div>
// --------------------
methods: {
select (e) {
this.split = true
},
choose (e) {
let el = e.srcElement
this.chosenWord = el.innerText
console.log(this.chosenWord)
},
chosen (word) {
if (word.trim() === this.chosenWord.trim()) {
return ['chosen']
} else {
return []
}
}
},
computed: {
spdata () {
return this.data.split(' ')
}
}
【讨论】：
有点凌乱的方法，但使用这种方法你可以听到点击每个单词然后模拟行为。我不认为 dblclick() 会模拟本机双击，但使用这种方法你可能能够实现你想要的。
脚本：
var words = $("p:first").text().split(" ");
var text = words.join("</div> <div>");
$("p:first").html("<div>" + text + "</div>");
$("div").click(function () {
$(this).css("background-color","yellow");
});
HTML
<p> word1 word2 word3 </p>
小提琴
【讨论】：
我会继续说这是不可能的。
Javascript 与 DOM 树交互，您可以与元素交互，但不能与文本本身交互。我认为远程可能的唯一方法（除了淹没你的 html 代码在 span 标签中）是动态地做到这一点：读取文本节点并在 span 中拆分单词。
【讨论】：
$('#content').click(function() {
$(this).dblclick();
});
浏览器可能会限制这种行为。例如，如果您试图通过转移或执行另一个事件来 .click() 不同的元素。以下答案也可能对此有所帮助：
【讨论】：