2

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

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

“嘿！请在鼠标下方突出显示文本……现在……即使我只是单击，而不是双击。”

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

是的，我打算然后对选定的文本做一些事情。

4

4 回答 4

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/

于 2012-03-11T19:12:43.253 回答
0 
$('#content').click(function() {
    $(this).dblclick();
});

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

带有jQuery的Javascript：单击并双击相同的元素，不同的效果，一个禁用另一个

于 2012-03-11T19:08:29.257 回答
0

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

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

于 2012-03-11T19:21:41.820 回答
0

与@Sindre 相同的概念，当鼠标悬停在 < p > 上时，将文本拆分为单词，并用于渲染它们。当点击这些<span>时，高亮它们。

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

此外，我没有使用鼠标悬停，而是单击。所以你应该点击<p>来选择它（激活，使颜色为红色），然后选择一个单词。 jsfiddle在这里

// 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(' ')
    }
  }
于 2017-06-18T14:57:15.327 回答