IE8文本選擇問題

Question

IE8文本選擇問題。

我已經使用了jQuery ui並創建了一個可調整大小的div。 因此，基本上，當我調整div文本的大小時，也將被選中，並且如果我需要再次調整它的大小，則需要在LI外部單擊，然后再次調整它的大小。

我試過了

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

-webkit-user-drag: none; 
-moz-user-drag: none; 
user-drag: none;

還嘗試了一些js代碼片段，但無法將其修復。

我的小提琴： http : //jsfiddle.net/svXTa/16/

有什么幫助嗎？

下面是問題的圖像。

Answer 1

采用

$('ul, #dgArea').disableSelection();

這只會禁用最初按下鼠標時來自這些元素之一的選擇。 如果在其他地方開始按下鼠標，則文本仍會突出顯示。

如果您不關心人們是否可以突出顯示容器中的文本，則可以將其設置為.container級別。

Answer 2

理想的解決方案是使用CSS屬性user-select禁用文本選擇及其所有供應商前綴：

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

不幸的是，IE8不支持CSS解決方案，因此您仍然需要使用Javascript。

正如布蘭登建議的那樣，jQuery UI的disableSelection()是一個選項，但它可能會產生一些不良影響：如果您查看jQuery UI源代碼 ，則該函數通過短路onselectstart事件（如果存在）來工作，否則它將取消onmousedown 。 由於onselectstart是非標准的，並且在Firefox中不受支持，因此這將禁用在該瀏覽器中的單擊，這可能是不希望的。

最好的解決辦法是上述CSS和一些JavaScript的組合禁用onselectstart ，只有onselectstart像這樣的東西：

$("ul, #dgArea").on("selectstart", function(e) { e.preventDefault(); });

Answer 3

單靠CSS不能完成這項工作。 這是一個特定於IE8的純JS解決方案，對我來說效果很好：

// test if is an old browser with lazyload optimisation
// because I often need to test if it is IE8
function isIE8(){
    var rv = -1; // Return value assumes failure.
    var appName = navigator.appName.toLowerCase();

    if (appName.indexOf('nternet')*appName.indexOf('xplorer') > 1) {
        var ua = navigator.userAgent.toLowerCase();
        var re = new RegExp("msie ([0-9]{1,}[\.0-9]{0,})");
        if (re.exec(ua))
            rv = parseFloat(RegExp.$1);
    }
    // LazyLoad optimisation
    isIE8 = function(){return (rv == 8);};
    return isIE8(); // 2 : call
}

function disableSelection(anElt){
// double check because some browsers mess with navigator.appName and userAgent
if(isIE8 && anElt.attachEvent) 
    anElt.attachEvent("onselectstart", function(){return false;});
}

voilà:)