重置變量onclick事件

Question

我有一個如下所示的javascript，它的作用是，它調用

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

可能是因為在mouseup事件的if（）內部定義了addEventlistener。 而且它不會更新。 我不知道該如何處理。

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