テキスト選択の一番上の親要素を見つける方法は？

Question

私は多くのcontenteditable divを持っています。

コンテンツ編集可能なdiv内でテキストをハイライト表示で選択すると、contenteditable div要素を取得します。 exempleについては

：私は強調表示することによって、テキスト「犬」を選択すると

<div contenteditable="true"> 

Hello World, 

<i>this is <b>a dog</b> in the garden</i> 

Thank you very much 

</div> 

だから、私は私が使用しているのcontentEditableたdiv要素を知るためにのcontentEditable div要素を取得したいです。

アイデア？

編集：

私はこのコードを作ったが、それは完璧ではない：

var selection = window.getSelection(); 

    var node = selection.anchorNode; 

    for(var i = 0; i < 50; i++) 
    { 
     node = node.parentNode; 

     if(node.getAttribute("contenteditable") == "true") 
     { 
      console.log("found"); 
      break; 
     } 
    } 

Answer 1

あなたはテキストが強調表示された後に発射するイベントを必要としています。 Unfortunatley、onhighlightイベントがないので、onmouseupのようなものを使用する必要があります。

次に、すべてのcontenteditable divにイベントリスナーを追加する方法が必要です。これを使用する1つの方法はdocument.querySelectorAll()です。しかし、これらのうちの "親"に1つのイベントリスナを追加することは簡単です。divsと下の指示に続けます。

mouseupのイベントリスナーは、イベントオブジェクトを提供します。 https://developer.mozilla.org/en-US/docs/Web/Events/mouseupを参照してください。このオブジェクトの値はcurrentTargetで、mouseupイベントが発生した要素が表示されます。この要素は、強調表示が行われた要素です。

Answer 2

この質問はすでに求められているようだ：ここで

javascript to get paragraph of selected text in web page

は別の例である：

http://www.codetoad.com/javascript_get_selected_text.html

Answer 3

私は以前の回答が過剰に複雑事項だと思います。

テキストを選択するか、要素をクリックするかは同じです。

あなたがクリックした、またはキーを押した現在の要素を識別できるようにする必要があります（そうでなければ、満足できる作業を賢明にする方法がわかりません）。あなたがこれを行うことができますと仮定

、あなたがする必要があるのはCurrentElmからwhileループとのcontentEditable属性を持つ親に戻っている！ - Elm.contenteditable =真{エルム= Elm.parent}

ながら、

私は完全なプログラミングの詳細を提供しないことを告白しますが、必要な場合は可能です。

第1の問題は、マウスクリックまたはキー入力時にCurrentElmを識別できることです。

これができない場合は、私に連絡してください。私は説明します。残りは簡単になります。