シングルクリックでハイライトするテキスト（javascript jquery html）

Question

すべてのブラウザで単語をダブルクリックすると、その単語の下に自動的に強調表示されます。しかし、正確なをワンクリックで起こさせる方法を見つけることは可能でしょうか？

これに関係するものは次のように想像してください： - TextRange stuff; - ブラウザを言うことができるかと言うことすべての段落のためのonclickに反応（または全身またはDIV）、...が、その後、私はどこにも発見していない：

「ねえ強調するそのクールなことを行ってください！テキストはマウスのすぐ下にあります...今すぐ...私はシングルクリックしただけでダブルクリックはしませんでした。ただ、明確化のため

：私はないはdiv要素または段落内のテキスト全体をハイライト表示するかどうかを確認しています（それはかなり単純になり、多くの説明はStackOverflowの上で、そのために与えられています）。また、各単語の10億の範囲を挿入するようなことをしたいとは思っていません。私はブラウザでテキストのダブルクリックが発生したときと全く同じ機能を見つけることを望んでいますが、1回のクリックに対してです。

はい、私はその後、選択したテキストで何かをするつもりです。

Answer 1

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

ブラウザによってはこの動作が制限される場合があります。たとえば、別のイベントを転送または実行して別の要素を.click（）しようとした場合などです。以下の答えもあっ役立つことがあります。厄介なアプローチの

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

Answer 2

種類がありますが、それぞれの単語をクリックして、動作をシミュレートするために聞くことができ、これを使用しました。私は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 3

私は先に行くと、それが不可能なことを言うつもりです。

JavascriptはDOMツリーとやりとりするため、要素とはやり取りできますが、テキスト自体とはやり取りできません。私はそれがリモートで（スパンタグであなたのhtmlコードを溺れさせること）の横に可能性があると思う唯一の方法は、それを動的に行うことです：テキストノードを読み、スパンで単語を分割することです。

Answer 4

@Sindreと同じ構想は、マウスを< p>に置いたときにテキストを単語に分割し、それをレンダリングするために使用します。これらの<スパン>をクリックすると、それらが強調表示されます。

下のjsfiddleでは、1つの単語をクリックすると、すべての同じ単語が強調表示されます。 選択したセットと比較する方法を変更することができます。単語自体ではなく、索引と比較して、単独の単語だけを強調表示する。

さらに、マウスオーバーは使用せず、代わりにクリックします。だから、< 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(' ') 
    } 
    }