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 codesnippets但是无法修复它。

我的小提琴：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。

正如Brandon所说，jQuery UI的disableSelection()是一个选项，但它可能有一些不良的副作用：如果你看一下jQuery UI source code，该函数可以通过短路{{1}来实现如果存在，则为event，否则将取消onselectstart。由于onmousedown是非标准的并且在Firefox中不受支持，因此这将禁用在该浏览器中单击，这可能是不可取的。

最好的解决方案是将上述CSS和一些Javascript组合使用以禁用onselectstart，并且仅使用onselectstart进行此类操作：

onselectstart

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;});
}

瞧瞧：）