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

可能是因为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';
    }
}

重置变量onclick事件

1 个答案: