javascript - Rally App SDK 2.0 : Ext. 元素方法 "unselectable"未标准化

Question

尽管“不可选择”方法应该禁用文本选择，但它在 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;
        },
    });
})();

但是，我收到此错误:

Uncaught TypeError: Cannot read property 'Element' of undefined

Answer 1

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

不幸的是分机的unselectable和selectable似乎不能完全处理 webkit，您可以通过覆盖方法来修复它。如何重写该方法取决于您使用的 SDK 版本。

对于应用 SDK 2.0p 和 2.0p2

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

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 以支持 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 等的样式。