javascript - 选择类型

Question

我正在尝试将悬停在具有以下属性的选择上的突出显示菜单放在一起:

• 它应该在做出选择时出现。
• 当选择被销毁时它应该消失。

除一件事外，所有这些都工作得很好:如果单击现有选择，则选择消失，悬停菜单也应该消失。但无论出于何种原因，它没有。

当您在现有选区之外单击时，选区类型会更改为“脱字符”或“无”(如果您单击该选区)。所以我尝试根据类型设置菜单的可见性。问题在于，尽管选择的类型在您通过 window.getSelection() 获取的对象中似乎发生了变化，但如果您尝试获取类型，则不会来自对象。

我把这个 jsfiddle 放在一起来说明这个问题。 https://jsfiddle.net/nxo2d7ew/1/

var el = document.getElementById("simple-text");
    el.addEventListener("mouseup", placeDiv, false);


    function placeDiv(x_pos, y_pos) {
        var sel = window.getSelection();
        var position = sel.getRangeAt(0).getBoundingClientRect();
        // console.log(sel)
        // console.log(position)

        var highlighter = document.getElementById('highlighter').offsetWidth

        var d = document.getElementById('highlighter');
        d.style.left = position.left+position.width*0.5-highlighter*0.5 +'px';
        d.style.top = position.top-50 +'px';

        // console.log('sel.type: ' + sel.type)
        var test = window.getSelection()
        console.log(test) // returns an object with "type: None"
        console.log(test.type) //returns "Range"
        if (test.type !== 'Range') {
            d.style.visibility = 'hidden';
        }
        else {
            d.style.visibility = 'visible';
        }
        var sel = ''
    }

谢谢 :-)

Answer 1

选择的真正改变并没有真正发生在 mouseup 事件上。之后还有一个步骤会更改选择，因此当 mouseup 被触发时，选择还没有改变。您在控制台中看到的并不是 mouseup 事件中选择对象的确切状态。

我不确定是否有跨浏览器的方式来访问真正的选择更改事件，在 Chrome 中有一个 selectionchange 事件，据说在 IE 中(但我无法测试它).但在 Firefox 中它不可用。也就是说，您用来测试它是否为空选择的 type 属性在 Firefox 上似乎也不起作用。但是您可以使用 isCollapsed。

您可能可以解决问题的一种方法是使用超时，虽然这不是最优雅的方法，您只需要几毫秒来更新选择，然后您的逻辑就会起作用 - 使用 isCollapsed 使其在 Firefox 上起作用。像这样:

setTimeout(function(){
    var test = window.getSelection()
    console.log(test) // returns an object with "type: None"
    console.log(test.type) //returns "Range"
    if (test.isCollapsed) {
        d.style.visibility = 'hidden';
    }
    else {
        d.style.visibility = 'visible';
    }}, 25);

https://jsfiddle.net/q1f4xfw9/6/

或者使用 Chrome 中的 selectionchange 事件，将隐藏条件移至此处理程序中。像这样:

document.addEventListener("selectionchange", function () {
    var d = document.getElementById('highlighter');
    var test = window.getSelection()
    if (test.type !== 'Range') {
        d.style.visibility = 'hidden';
    }
});

https://jsfiddle.net/q1f4xfw9/5/

编辑:

还有另一种方法可以解决此问题，您可以使用 removelAllRanges 删除鼠标按下时的选择。然后选择更改事件将在 mouseup 之前触发。由您决定功能上的微小变化是否符合您的要求。像这样:

el.addEventListener("mousedown", function(e){
    window.getSelection().removeAllRanges()
}, false);

https://jsfiddle.net/q1f4xfw9/8/