javascript - 重置变量 onclick 事件

Question

我有一个如下所示的 Javascript，它的作用是调用

doSomethingWithSelectedText

检查是否选择了任何文本的函数(使用函数 getSelectedObj)。

getSelectedObj 返回一个对象。

问题是每次选择某些文本时，div #text 都会更新。并且 div #search 打开新的谷歌标签搜索突出显示/选定的文本。

但它会在任何其他选择之后停止更新。

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