dom要素にハイライトされたテキストが含まれているかどうかを確認します

Webアプリケーションで、テキスト要素のclickイベントとmouseupイベントに対して異なる動作を実装しようとしています。 mouseupイベントでは、選択されたテキストがあるかどうかをチェックし、何かを実行します。クリックイベントでは、クリックしたテキストのどこかをナビゲートするような操作を行います。しかし、選択されたテキストがある場合、私はクリックイベントでコードを実行しません。これは私が立ち往生した部分です。ここで私が今やっていることのモーダルです：dom要素にハイライトされたテキストが含まれているかどうかを確認します

//the function that returns selected text as string 
 
function getSelectionText() { 
 
    var text = ""; 
 
    if (window.getSelection) { 
 
    text = window.getSelection().toString(); 
 
    } else if (document.selection && document.selection.type != "Control") { 
 
    text = document.selection.createRange().text; 
 
    } 
 
    return text; 
 
} 
 

 
function onMouseUp(event) { 
 
    var selection = getSelectionText(); 
 
    if (selection != "") { 
 
    alert("Selected text: " + selection); 
 
    } 
 

 
} 
 

 
function onClick(event) { 
 
    alert("You clicked the text."); 
 
}

<body> 
 
    <h2 onclick="onClick(); return false;" onmouseup="onMouseUp(); return false;"> 
 
    text to click or select 
 
    </h2> 
 
</body>

は私がのonClickハンドラ内でこのような何かをしたいが

function onClick(event) 
{ 
    if (!hasSelectedParts(this)) // want to implement hasSelectedParts() function 
    { 
     alert("You clicked the text."); 
    } 
}

どのようにして実装することができDOMELEMENT（hasSelectedPartsこと）関数？つまり、には、dom要素にいくつかの選択された部分があるかどうかを検出する簡単な方法があります。

出典

2017-04-03 t.m.

'window.getSelection（）。anchorNode'？依然としてクロールする必要があるかもしれませんが、これはエントリです – dandavis

@dandavisのセコンディング - [window.getSelection]に関するいくつかのドキュメントをチェックしてください（https://developer.mozilla.org/en-US/docs/Web/API/ Window/getSelection）。 –

コメントありがとうございます。ここに私が思いついたのがあります：

function hasSelectedContend(element) 
{ 
    var selection = window.getSelection(); 
    return !selection.isCollapsed // selection data is about currently highlighted text 
     && selection.anchorNode !== null // there is a selection 
     && selection.anchorNode.parentNode === element; //selection is in the element 
}

出典

2017-04-04 19:04:53

dom要素にハイライトされたテキストが含まれているかどうかを確認します

答えて

関連する問題