選擇類型

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/