鼠标点击复制adds标签文本在Chrome中添加相邻的标签文本

Question

新来这里的。我有一个扩展qx.ui.container.Composite的容器，它包含一个网格布局，其中包含x行和4列中的基本标签。列0和2中的文本是静态的，而列1和3中的文本是动态的。

this = qx.ui.container.Composite;
this.setLayout(new qx.ui.layout.VBox());
this._labelContainer = new qx.ui.container.Composite();
this._labelContainer.setLayout(new qx.ui.layout.Grid(30, 3));
this._labelContainer.add(this._createLabel("First Name:", true, false), {row: 1, column: 0});
this._labelContainer.add(this._createLabel(person.firstname, false, true), {row: 1, column: 1});
this._labelContainer.add(this._createLabel("Last Name:", true, false), {row: 1, column: 2});
this._labelContainer.add(this._createLabel(person.lastname, false, true), {row: 1, column: 3});
this._labelContainer.add(this._createLabel("County:", true, false), {row: 2, column: 0});
this._labelContainer.add(this._createLabel(person.address.county, false, true), {row: 2, column: 1});
this._labelContainer.add(this._createLabel("City:", true, false), {row: 2, column: 0});
this._labelContainer.add(this._createLabel(person.address.city, false, true), {row: 2, column: 1});
this.add(this._labelContainer)    

// Member function
_createLabel: function(text, bold, selectable) {
    var ret = new qx.ui.basic.Label(text);
    if (bold) ret.setFont("bold");
    if (selectable) ret.setSelectable(true);
    return ret;
}

问题:当我通过双击或三击鼠标从一个标签复制文本时，标签文本和相邻标签的文本都被复制到剪贴板上。这将复制相邻的标签文本，无论它是否设置为可选的。鼠标拖动/选择/复制工作，但这并不满足客户端的要求。我只在Chrome ~ v63中经历过这种情况，在火狐(IE，Edge是未知的)中从未发生过这种情况。Qooxdoo v5.x

我到处都找遍了(qooxdoo论坛，bug报告，Chrome bug报告，所以.)也没有遇到任何报告说遇到过这个问题的人。有谁遇到过这个问题，或者有什么见解可以分享，这可能有助于“qooxdoo方式”？

Answer 1

我可以想象，这只是Chrome选择文本的一个奇怪之处--每个标签都是独立的<div>'s，而Chrome选择将它们结合在一起进行选择(尽管两者之间还有其他div没有被选中)。你只需点击和移动鼠标，而不是双击就可以选择想要的内容。

但是，关于示例代码，我要指出的一点是，您不应该为this赋值；看起来您正在尝试编写一个类，但是在you中这样做的正确方法是使用qx.Class.define(...)。

例如：

qx.Class.define("my.MyClass", {
  extend: qx.ui.container.Composite,

  construct: function() {
    this.base(arguments);
    this.setLayout(new qx.ui.layout.VBox());
    this._labelContainer = new qx.ui.container.Composite();
    this._labelContainer.setLayout(new qx.ui.layout.Grid(30, 3));
    this._labelContainer.add(this._createLabel("First Name:", true, false), {row: 1, column: 0});
    this._labelContainer.add(this._createLabel(person.firstname, false, true), {row: 1, column: 1});
    this._labelContainer.add(this._createLabel("Last Name:", true, false), {row: 1, column: 2});
    this._labelContainer.add(this._createLabel(person.lastname, false, true), {row: 1, column: 3});
    this._labelContainer.add(this._createLabel("County:", true, false), {row: 2, column: 0});
    this._labelContainer.add(this._createLabel(person.address.county, false, true), {row: 2, column: 1});
    this._labelContainer.add(this._createLabel("City:", true, false), {row: 3, column: 0});
    this._labelContainer.add(this._createLabel(person.address.city, false, true), {row: 3, column: 1});
    this.add(this._labelContainer)    
  },

  members: {
    _createLabel: function(text, bold, selectable) {
        var ret = new qx.ui.basic.Label(text);
        if (bold) ret.setFont("bold");
        if (selectable) ret.setSelectable(true);
        return ret;
    }    
  }
});

var comp = new my.MyClass();
doc.add(comp, { left: 100, top: 100 });

此外，在为其他人编写示例时，能够在for游乐场(http://www.qooxdoo.org/devel/playground/)中勾勒出您的示例是非常有用的--这允许您为人们提供一个关于您问题的即时可复制示例。

下面是示例的游乐场版本：操场实例