选择类型

Question

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

选择时应该会出现。
选择被销毁时它应该消失。

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

当您在现有选区之外单击时，选区类型会更改为 'caret' 或 'none'（如果您单击该选区）。所以我尝试根据类型设置菜单的可见性。问题是虽然选择的类型似乎在您通过 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 使其起作用火狐。像这样：

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/

选择类型

Type of selections

javascript

web-frontend