Rally App SDK 2.0:Ext.Element 方法“不可选择”并没有那么规范化

Rally App SDK 2.0: Ext.Element method "unselectable" isn't so normalized

本文关键字：不可选择 可选择 并没有 规范化 方法 SDK App Element Ext Rally      更新时间：2023-09-26

尽管"unselectable"方法应该禁用文本选择，但它在IE中无法正常工作，至少在IE8中是这样。文本光标仍然存在，并允许输入。

我应该假设它在IE9中也不起作用，因为Microsoft等效的CSS属性"-ms-user-select"最近才在IE10中引入，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;
        },
    });
})();

但是，我收到此错误：

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

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

不幸的是，Ext的unselectable和selectable似乎不能完全处理webkit，您可以通过覆盖方法来解决此问题。如何覆盖该方法取决于您使用的 SDK 版本。

适用于应用 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()里面的第一件事

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

适用于 2.0p3 及更高版本的应用 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等添加样式。

相关文章：