选择类型

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/