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

当您在所有浏览器中双击某个单词时，它们会自动突出显示该单词下的单词。但是，是否有可能找到一种方法让单一点击发生同样的事情？在单击时突出显示文本（javascript jquery html）

我想这可能涉及的事情是： - TextRange stuff; - 反应到的onclick的所有段落（或全身或DIV），......但后来我还没有发现任何地方，说你怎么能告诉浏览器：

“嘿请不要突出的是很酷的事情！文本就在鼠标下面......现在就是...即使我只点击一下，也没有双击。“

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

是的，我打算对选定的文本做些什么。

2012-03-11 Nicholas Petersen

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

浏览器可能会限制此行为。例如，如果您试图通过转移或执行另一个事件来点击（）不同的元素。以下的答案也可以帮助有：

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

来源

2012-03-11 19:08:29

谢谢阿拉姆，非常有趣（和简单）。不幸的是，没有为我工作。我在调试时看到，每次点击都会调用该函数，所以这不是问题。所以它不起作用（在Chrome和IE中试用）。这可能与Mantion在下面说的有关：“我不认为dblclick（）会模拟原生双击。”敏锐的观察，可能为什么它没有工作。可能有一种方法来模拟原生双击？ – 2012-03-12 01:07:46

在这个答案中，它延迟了双击的事件。我认为当两个事件处理程序同时被调用时，浏览器怀疑犯规行为。 – 2012-03-13 23:49:08

一种凌乱的办法，但使用这个你可以听单击每个单词，然后模仿行为。我不认为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-11 19:12:43 Sindre

有趣的做法，我用跨度更新http://jsfiddle.net/kumiau/tbpJT/2/ – kumiau 2012-03-11 19:53:50

谢谢。但是，我从字面上感觉到想要改变页面（在引擎盖下）来增加无数的跨度或者什么不是。尽管如此，我并不擅长jQuery，但我从这个功能性的例子中学到了一些东西。 – 2012-03-12 01:02:40

很高兴能帮到你！ – Sindre 2012-03-12 17:50:47

我要继续前进，并说，这是不可能的。

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

来源

2012-03-11 19:21:41 kumiau

但是我们不要忘记：所有的浏览器都可以在双击时完美地完成这个任务，所以他们绝对有能力。浏览器本身我确定是实际处理突出显示文本的内容，而不是操作系统（在这种情况下，事情会变得更加模糊）。所以他们显然有一个命令来做到这一点，根据鼠标指针的位置。不过，我了解情绪。我看了看，看起来... – 2012-03-12 01:06:29

浏览器是一个应用程序，你可以用本地应用程序做很多事情，你不能用javascript做。我已经尝试了其他应用程序中的doble点击，并且以相同的方式工作，所以我认为更多的是操作系统而不是浏览器本身。 – kumiau 2012-03-12 03:18:00

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

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

此外，我没有使用鼠标悬停，而是点击。所以你应该点击< 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(' ') 
    } 
    }

来源

2017-06-18 14:57:15 Plasmatium

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

回答

相关问题