鼠标点击复制Qooxdoo标签文字在Chrome中添加相邻标签文字答案

【问题标题】：Mouse-click copying Qooxdoo label text adds adjacent label text in Chrome鼠标点击复制Qooxdoo标签文字在Chrome中添加相邻标签文字
【发布时间】：2018-03-22 18:26:27
【问题描述】：

这里是 Qooxdoo 的新手。我有一个扩展 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 中经历过这种情况，在 Firefox 中从未发生过（IE、Edge 是未知数）。 Qooxdoo v5.x

我到处搜索（qooxdoo 论坛、错误报告、Chrome 错误报告、SO....），但没有遇到任何报告遇到此问题的人。还有其他人遇到这个问题或有任何见解可以帮助“qooxdoo 方式”吗？

【问题讨论】：

标签： javascript google-chrome qooxdoo

【解决方案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

【讨论】：