[Web Chart系列之五] 4. 實戰draw2d(Raphael)之取消Chrome中Label Text 全部選中 · Web Chart

### 情況描述這里使用的是Rectangle , 里面加入一個Label 或多個Label 的組合圖形。在Chrome里拖拽圖形的時候，偶爾會把所有Rectangle包含的Label 全部以深藍色底色。需要在非Canvas的區域點擊一下，深底色才消除。以上的狀況出現在IE和Chrome都會有，但幾率倒不是很大。在Firefox 中沒有這個問題。 ### 問題考慮與重現既然不是所有流量器都有這個問題，應該和瀏覽器有一定的關系。 google 一下 “Chrome 頁面全選中”，果然找到一些線索。 Chrome 和其他流量器本身提供了文本部分和全部選中的功能，選擇之后的效果就是反底色。在非Canvas區域盡量多選一些文本，果然Canvas區的圖馬上就有那種效果了，問題很容易重現了。看來這個問題不光是chart 會遇到。既然是選中導致，那是否設置不可選中的CSS是否就可以了呢？先看看如何設置不可選取的樣式在 Chrome 中： ~~~ body { -webkit-user-select: none; } ~~~ 在Firefox 中： ~~~ body { -moz-user-select: none; } ~~~ 在IE中(不能通過設置 CSS達成，用以下方式) ~~~ <body onselectstart="return false"> ~~~ ### 問題解決以上的設置是對整個頁面進行設置，這并不是我的要求。對Chrome 和 FireFox ,可以對指定的頁面元素使用以上CSS樣式。回歸到draw2d, 如何給Label 設置這個CSS, 1. 初步想法是看看能否找到直接設置CSS的方式， as shape.style.XXX= XXX, 沒有找到。看來只能底層一點的Raphael方式設置頁面元素的CSS了。 2. 設置點：最初考慮的設置點是init or repaint但是發現都失敗了。正確是設置在? Label定義的createSet的方法里。修改如下： ~~~ createSet: function () { var newShape = this.canvas.paper.text(0, 0, this.text, this.getTitle(), this.getWeight()); //not select text if(isChrome) { ($(newShape.node)).css('-webkit-user-select', 'none'); } return newShape; } ~~~