实战draw2d(Raphael)之取消Chrome中Label Text 全部选中
情况描述
这里使用的是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;
}
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索css
， 问题
， chrome
， 页面
， label
node webkit
chart.js入门、webchart、web chart、webchartcontrol、webchartcontrol 属性，以便于您获取更多的相关知识。