Web Chart 入門（5-4）：解決 Chrome 下 draw2d Label 被全選中問題

問題現象

在 Chrome 中拖拽包含 Label 的 Rectangle 等組合圖形時，偶爾導致所有 Label 文本被深藍色背景選中（類似全選效果），需在非 Canvas 區域點擊才能取消。IE 也會出現，Firefox 正常。

根因分析

瀏覽器原生支持文本選中功能，Canvas 區域內的 SVG/VML 文本元素同樣受影響。非 Canvas 區域選中文本後，Canvas 內文本也會被連帶選中。

解決方案：CSS 禁用用戶選中

瀏覽器前綴寫法

/* Chrome / Safari */
-webkit-user-select: none;

/* Firefox */
-moz-user-select: none;

/* IE 10+ */
-ms-user-select: none;

/* Opera */
-o-user-select: none;

/* 標準 */
user-select: none;

IE 9- 需在元素上添加 onselectstart="return false"。

draw2d 中具體實現

針對 Label 形狀，在其 createSet 方法中為生成的 DOM 節點設置樣式：

createSet: function() {
    var newShape = this.canvas.paper.text(0, 0, this.text, this.getTitle(), this.getWeight());
    // 針對 Chrome 禁用文本選中
    if (isChrome) {
        $(newShape.node).css('-webkit-user-select', 'none');
    }
    return newShape;
}

關鍵點：

• 設置點必須在 createSet（而非 init/repaint），因為此時 Raphael 已創建底層 DOM 節點。
• 可通過 navigator.userAgent 判斷瀏覽器僅在 Chrome 應用，避免影響其他瀏覽器行為。

效果驗證

修改後，Chrome 中拖拽圖形不再觸發 Label 文本選中，交互體驗顯著提升。