重置变量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';
    }
}