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

Question

这里是Qooxdoo的新手。我有一个扩展qx.ui.container.Composite的容器，它包含一个Grid布局，其中包含 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;
}

ISSUE：当我通过双击或三击鼠标从一个标签复制文本时，标签文本和相邻标签中的文本都会复制到剪贴板。这会复制相邻的标签文本，无论它是否设置为“可选”。鼠标拖动/选择/复制有效，但不满足客户要求。我只在Chrome~v63中遇到过这种情况，在Firefox中从未发生过（IE，Edge都是未知数）。 Qooxdoo v5.x

我到处搜寻（qooxdoo论坛，错误报告，Chrome错误报告，所以....）并且没有遇到报告遇到此问题的任何人。有没有其他人遇到这个问题或有任何见解可能有助于“qooxdoo方式”？

Answer 1

我认为这只是Chrome选择选择文字的一个怪癖 - 每个标签都是单独的<div>，而Chrome选择将它们连接在一起进行选择（即使有是其他div之间未选中的）。您可以通过单击并移动鼠标而不是双击来选择所需的位。

我要指出的有关示例代码的一件事是，您不应该为this分配值;看起来你正在尝试编写一个类，但在Qooxdoo中执行此操作的正确方法是使用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 });

此外，在为其他人编写示例时，能够在Qooxdoo Playground（http://www.qooxdoo.org/devel/playground/）中勾勒出您的示例非常有用 - 这可以让您为人们提供即时可重现的示例你的问题。

这是您示例的游乐场版本：Playground Example