zurückgesetzt Variable Onclick-Ereignis

Question

ich unten ein Javascript wie gegeben haben, was es tut, ist es

doSomethingWithSelectedText

Funktion, die das überprüft, ruft, wenn ein beliebiger Text ausgewählt (mit der Funktion getSelectedObj).

getSelectedObj gibt ein Objekt zurück.

Das Problem ist, dass div #text aktualisiert wird jedes Mal ein Text ausgewählt ist. Und div #Suche öffnet die neue Google Registerkarte Suche der markierte/ausgewählte Text.

Aber es hört auf, danach auf irgendeiner anderen Auswahl zu aktualisieren.

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 = ''; 
} 
} 

Vielleicht liegt es daran, dass der addEventlistner im if() des mouseup-Ereignisses definiert ist. Und es wird nicht aktualisiert. Ich weiß nicht, wie ich damit umgehen soll.

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

Sie in der Tat den Event-Handler außerhalb Ihrer Funktion setzen sollte, wie Du wirst Stapelhandler, die beim nächsten Suchklick ausgeführt werden. Hier

ist ein Update des Codes mit den Änderungen des mit ***:

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'; 
    } 
}