1

即使“不可选择”方法应该禁用文本选择，它在 IE 中也不能正常工作，至少在 IE8 中。文本光标仍然存在，并允许输入。

我应该假设它在 IE9 中也不起作用，因为 Microsoft 等效 CSS 属性“-ms-user-select”最近才在 IE10 中引入，尚未“正式”发布，目前也不支持Windows 7的。

我还应该质疑为什么也不包括 webkit 版本（“-webkit-user-select”）。我知道 webkit 是 khtml 的一个分支，它似乎在 Chrome 中按预期工作，但我仍然质疑这个遗漏。

/**
* Disables text selection for this element (normalized across browsers)
* @return {Ext.Element} this
*/
unselectable : function(){
    var me = this;
    me.dom.unselectable = "on";

    me.swallowEvent("selectstart", true);
    me.applyStyles("-moz-user-select:-moz-none;-khtml-user-select:none;");
    me.addCls(Ext.baseCSSPrefix + 'unselectable');

    return me;
}

是否有一种简单的方法来修改此代码，以便在 IE10 之前的 IE 版本中提供适当的功能？

编辑：我在让它工作时遇到了一些麻烦。我在 onReady 调用中插入了以下内容，但在应用程序之前。

(function() {
    var Ext = window.Ext4 || window.Ext;

    Ext.override(Ext.dom.Element, {
        unselectable: function() {
            var me = this;
            me.dom.unselectable = "on";

            me.swallowEvent("selectstart", true);

            me.applyStyles([
                '-moz-user-select: none;', 
                '-khtml-user-select: none;', 
                '-webkit-touch-callout: none;', 
                '-webkit-user-select: none;', 
                '-ms-user-select: none;', 
                'user-select: none'
            ].join());

            me.addCls(Ext.baseCSSPrefix + 'unselectable');

            return me;
        },

        selectable: function() {
            var me = this;
            me.dom.unselectable = "off";
            // Prevent it from bubles up and enables it to be selectable
            me.on('selectstart', function(e) {
                e.stopPropagation();
                return true;
            });

            me.applyStyles([
                '-moz-user-select: text;', 
                '-khtml-user-select: text;', 
                '-webkit-touch-callout: text;', 
                '-webkit-user-select: text;', 
                '-ms-user-select: text;', 
                'user-select: text'
            ].join());

            me.removeCls(Ext.baseCSSPrefix + 'unselectable');
            return me;
        },
    });
})();

但是，我收到此错误：

未捕获的类型错误：无法读取未定义的属性“元素”

4

1 回答 1

1

该行me.dom.unselectable = "on";用于处理unselectableIE9 及更低版本。这将为元素添加一个属性，如<div unselectable="on">blah</div>，这将导致 div 的文本不再可编辑。那不适合你吗？

不幸的是，Ext似乎并不能很好地处理 webkit，您可以通过覆盖这些方法来解决这个问题unselectable。selectable如何覆盖该方法取决于您使用的 SDK 版本。

适用于 App SDK 2.0p 和 2.0p2

这些版本的 SDK 是针对 ExtJS 4.0.7 构建的。在 Ext 4.0 中，您不能使用Ext.override来修补Ext.Element. 因此，您需要更加手动并更改原型：

Ext.core.Element.prototype.unselectable = function() {
   var me = this;
   me.dom.unselectable = "on";

   me.swallowEvent("selectstart", true);

   me.applyStyles([
    '-moz-user-select: none;', 
    '-khtml-user-select: none;', 
    '-webkit-touch-callout: none;', 
    '-webkit-user-select: none;', 
    '-ms-user-select: none;', 
    'user-select: none'
    ].join());

   me.addCls(Ext.baseCSSPrefix + 'unselectable');

   return me;
};

Ext.core.Element.prototype.selectable = function() {
   var me = this;
   me.dom.unselectable = "off";
   // Prevent it from bubles up and enables it to be selectable
   me.on('selectstart', function(e) {
       e.stopPropagation();
       return true;
   });

   me.applyStyles([
    '-moz-user-select: text;', 
    '-khtml-user-select: text;', 
    '-webkit-touch-callout: text;', 
    '-webkit-user-select: text;', 
    '-ms-user-select: text;', 
    'user-select: text'
    ].join());

   me.removeCls(Ext.baseCSSPrefix + 'unselectable');
   return me;
};

您应该将其作为内部的第一件事Rally.onReady()

适用于 App SDK 2.0p3 及更高版本

适用于 2.0p3 及更高版本的 App SDK 是针对 ExtJS 4.1 构建的。他们将 Ext.Element 更改为 support Ext.override，所以在这里我们可以做一个稍微干净的解决方案（这基本上是我最初发布的内容）：

Ext.override(Ext.dom.Element, {
    unselectable: function() {
        var me = this;
        me.dom.unselectable = "on";

        me.swallowEvent("selectstart", true);

        me.applyStyles([
            '-moz-user-select: none;', 
            '-khtml-user-select: none;', 
            '-webkit-touch-callout: none;', 
            '-webkit-user-select: none;', 
            '-ms-user-select: none;', 
            'user-select: none'
        ].join());

        me.addCls(Ext.baseCSSPrefix + 'unselectable');

        return me;
    },

    selectable: function() {
        var me = this;
        me.dom.unselectable = "off";
        // Prevent it from bubles up and enables it to be selectable
        me.on('selectstart', function(e) {
            e.stopPropagation();
            return true;
        });

        me.applyStyles([
            '-moz-user-select: text;', 
            '-khtml-user-select: text;', 
            '-webkit-touch-callout: text;', 
            '-webkit-user-select: text;', 
            '-ms-user-select: text;', 
            'user-select: text'
        ].join());

        me.removeCls(Ext.baseCSSPrefix + 'unselectable');
        return me;
    }
 });

在这两种情况下，只需稍微调整函数即可为 webkit、IE 等添加样式。

于 2012-08-20T17:07:47.403 回答