Question

双击所有浏览器中的单词时，它们会自动突出显示单击下的单词。但有没有可能找到一种方法让单击一下完全相同的事情？

我想这涉及的事情可能是： - TextRange的东西; - 对所有段落（或整个身体或div）的onclick做出反应，但是我还没有找到任何可以告诉浏览器的地方：

“嘿！请在鼠标下面突出显示正确的文字...现在正确...即使我只点击了一下，也没有双击。”

只是为了澄清：我不要求突出显示div或段落中的整个文本（这将是相当简单的，在stackoverflow上给出了很多解释）。我也不想做任何事情，例如为每个单词插入十亿个跨度。我希望找到在浏览器中双击文本时获得的完全相同的功能，但只需单击一下。

是的，我计划用所选文字做点什么。

Answer 1

有点凌乱的方法，但使用这个你可以听取点击每个单词，然后模拟行为。我不认为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>

小提琴

http://jsfiddle.net/tbpJT/1/

Answer 2

$('#content').click(function() {
    $(this).dblclick();
});

浏览器可能会限制此行为。例如，如果您尝试通过转移或执行另一个事件来.click（）另一个元素。以下答案也可能对此有所帮助：

Javascript with jQuery: Click and double click on same element, different effect, one disables the other

Answer 3

我要继续说这是不可能的。

Javascript与DOM树交互，您可以与元素交互，但不能与文本本身交互。我认为远程可能的唯一方法（除了在span标签中淹没你的html代码）就是动态地做到这一点：读取文本节点并在跨度中分割单词。

Answer 4

与@Sindre相同的概念，当鼠标悬停在＆lt; p＆gt ;,将文本拆分为单词，并用于渲染它们。点击这些＆lt; span＆gt;，高亮显示它们。

在下面的jsfiddle中，单击一个单词，突出显示所有相同的单词。您可以更改与所选设置的比较，例如。与索引进行比较，而不是单词本身，以单独突出显示单个单词。

此外，我没有使用鼠标悬停，而是点击了。所以你应该点击＆lt; p>选择（激活，使颜色变为红色），然后选择一个单词。 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(' ')
    }
  }

单击突出显示文本（javascript jquery html）

4 个答案: