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à:)