JavaScriptをダブルクリックするとバウンディングボックスのサイズが大きくなります

Question

テキストがハイライトされているときはいつでも、JavaScriptを使用してポップアップを作成しようとしています。私もそれを作成しただけです。しかし、それにもバグがあり、私はそれを取り除くのが難しい時があります。

ハイライトされた単語をダブルクリックしようとすると、popのdivサイズの位置とサイズが増加し続け、最終的にはページ外に出るというバグです。ここで

コード

index.htmlを

//*some more blocks of text* 

<div id="popup"></div> <!-- this is popup --> 

Styles.cssを

#popup{ 
    display: none; 
    background-color: orange; 
    color: white; 
    position: absolute; 
    z-index: 1000; 
} 

script.js

0123であります

Answer 1

（スニペットを使用して）実例を作成しましたが、あなたのバグは表示されません。あなたはそれを指摘できますか？

function getSelectedObj() { 
 
var selObj = {}; 
 
selObj.text = ''; 
 
if (typeof window.getSelection != "undefined") { 
 
    selObj.rect = window.getSelection().getRangeAt(0).getBoundingClientRect() ; 
 
    selObj.text = window.getSelection().toString(); 
 
} else if (typeof document.selection != "undefined" && document.selection.type == "Text") { 
 
    // this block not used in new versions of chrome, mozilla and IE11 
 
    selObj.text = document.selection.createRange().text; 
 
} 
 
return selObj; 
 
} 
 

 
function doSomethingWithSelectedText() { 
 
var selectedObj = getSelectedObj(); 
 
if (selectedObj.text) { 
 
    document.querySelector('#popup').style.display = 'block'; 
 
    //console.log(selectedObj.rect); 
 
    document.querySelector('#popup').innerHTML = selectedObj.text; 
 
    document.querySelector('#popup').style.height = selectedObj.rect.height; 
 
    document.querySelector('#popup').style.width = selectedObj.rect.width; 
 
    document.querySelector('#popup').style.top = selectedObj.rect.top - 1.5*selectedObj.rect.height; 
 
    document.querySelector('#popup').style.left = selectedObj.rect.left ; 
 
} 
 
else { 
 
    document.querySelector('#popup').style.display = 'none'; 
 
} 
 
} 
 

 
document.onmouseup = doSomethingWithSelectedText; 
 
document.onkeyup = doSomethingWithSelectedText;

#popup{ 
 
display: none; 
 
background-color: orange; 
 
color: white; 
 
position: absolute; 
 
z-index: 1000; 
 
}

<div id="popup"></div> 
 

 
Here is some text I'd like to select.