編集可能でない要素からテキストを選択するためのJavascriptイベント

Question

javascriptではdivやspanのような編集不可能な要素からの選択テキストのイベントが利用可能です。 段落から選択したテキストを行い、ページ上のポップアップカラーボックスを開くことからテキストをハイライトしたいと思います。 ユーザーによるテキスト選択の終了によりカラーボックスを開きます。では、ユーザーがテキストの選択を終了すると、どうやってイベントを捕捉できますか？ 私のようなマウスアップイベントで試してみました：

var slideElement = angular.element('.myElement', elem); 
slideElement.bind('mouseup', (event) => { 
    // Funtionality goes here 
)}; 

それはデスクトップ用正常に動作しますが、タッチデバイス上では動作しません。したがって、デスクトップとタッチデバイスの両方で正常に動作するように、適切な方法で選択終了イベントを処理できます。 タッチデバイスからテキストを選択すると、タッチ終了イベントも機能しません。 おかげ

Answer 1

イベントのハンドラにdivまたはspanからテキストを選択するための最良のブラウザ互換性のあるコードは以下の通りです：

function SelectText(element) { 
 
    var doc = document, 
 
    text = doc.getElementById(element), 
 
    range, selection; 
 
    if (doc.body.createTextRange) { 
 
    range = document.body.createTextRange(); 
 
    range.moveToElementText(text); 
 
    range.select(); 
 
    } else if (window.getSelection) { 
 
    selection = window.getSelection(); 
 
    range = document.createRange(); 
 
    range.selectNodeContents(text); 
 
    selection.removeAllRanges(); 
 
    selection.addRange(range); 
 
    } 
 
} 
 

 
document.onclick = function(e) { 
 
    if (e.target.className === 'click') { 
 
    SelectText('selectme'); 
 
    } 
 
};

.click { 
 
    color: red; 
 
    cursor: pointer; 
 
}

<div id="selectme"> 
 
    <p>Some text goes here!</p> 
 
    <p>More text!</p> 
 
</div> 
 
<p class="click">Click me!</p>

これは、モバイル上でうまく動作するはずですデバイスも。