私は下記のようなJavaScriptを持つ変数のonclickイベント

Question

をリセットし、それがされて何をするか、それが機能を使用している場合、任意のテキストが選択されていることを確認し

doSomethingWithSelectedText

機能（呼び出しますgetSelectedObj）。

getSelectedObjはオブジェクトを返します。

問題は、一部のテキストが選択されるたびにdiv ＃textが更新されるという問題です。そしてdiv #searchは、強調表示された/選択されたテキストを検索する新しいGoogleタブを開きます。

それ以外の選択では、それ以降は更新が停止します。

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


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(e) { 

var selectedObj = getSelectedObj(); 
if (selectedObj.text) { 
    document.querySelector('#popup').style.display = 'block'; 
    document.querySelector('#popup').style.top = e.clientY - 40; 
    document.querySelector('#popup').style.left = e.clientX + 20; 
    document.querySelector('#text').innerHTML = selectedObj.text; 

    document.querySelector('#search').addEventListener('click', function (e)    { 
    window.open('https://www.google.com/search?q=' + selectedObj.text); 

}); 

} 
else { 
    document.querySelector('#popup').style.display = 'none'; 
    selectedObj.text = ''; 
} 
} 

addEventListenerがmouseupイベントのif（）の内部で定義されている可能性があります。それは更新されません。私はこれをどう扱うべきか分からない。あなたが本当にとして、あなたの関数の外のイベントハンドラを置くべき

index.htmlを

<div id="popup"> 
    <div id ="text"></div> 
    <div id="search" class="fa fa-search"></div> 
    <div id="save" class="fa fa-file"></div> 
</div> 

Styles.cssを

#popup{ 

display: none; 
background-color: orange; 
color: white; 
position: absolute; 
z-index: 1000; 
width:100px; 
height: 50px; 
} 

#search,#save { 
display: inline-block; 
padding: 15px; 
font-size: 20px; 

}

Answer 1

あなたはなれます次の検索クリックですべてが実行されるハンドラを積み重ねます。ここで

が***でマークされた変更で、あなたのコードの更新です：

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

function getSelectedObj() { 
    var selObj = {}; 
    selObj.text = ''; 
    if (typeof window.getSelection != "undefined") { 
     // ***Additional safety to avoid runtime errors 
     if (window.getSelection().rangeCount) { 
      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; 
} 

// ***Variable for retaining the search string 
var searchStr = ''; 
// ***Capture mouseup instead of click, so we can prevent the document level 
// handler to get called. 
document.querySelector('#search').addEventListener('mouseup', function (e)    { 
    window.open('https://www.google.com/search?q=' + searchStr); 
    return false; // ***Cancel bubbling to document. 
}); 

function doSomethingWithSelectedText(e) { 
    var selectedObj = getSelectedObj(); 
    if (selectedObj.text) { 
     console.log('text:' + selectedObj.text); 
     document.querySelector('#popup').style.display = 'block'; 
     document.querySelector('#popup').style.top = e.clientY - 40; 
     document.querySelector('#popup').style.left = e.clientX + 20; 
     // ***Use textContent instead of innerHTML 
     document.querySelector('#text').textContent = selectedObj.text; 
     // ***Store search string to be used when launching search 
     searchStr = selectedObj.text; 
    } else { 
     document.querySelector('#popup').style.display = 'none'; 
    } 
}