拉斐尔JS - 点击

Question

DEMO时，为防止文本高亮：http://jsfiddle.net/p7Lze6nh/

使用拉斐尔JS 2.1.2和我想要被点击元素时禁止文本高亮。它在Chrome上执行，但由于某些原因，不能在IE上执行。我目前没有在此笔记本电脑上使用FF进行测试。

的代码是相对straightforward-

var paper = Raphael(0, 0, 125, 125); 
paper.canvas.style.backgroundColor = "Black"; 
var a = 0; 

text1 = paper.text(10, 10, a).attr({"text-anchor":"start", fill:"white"}); 
rect1 = paper.rect(10, 50, 50, 50).attr({fill:"white"}); 

rect1.click(function(){ 
    inc() 
}); 

function inc() { 
    a++; 
    text1.attr({text: a}); 
} 

我使用尝试“用户选择：无”等各种CSS规则通过对包含纸DIV实例发现，但没有工作。我也尝试使用

text1.userSelect = "none"; 

...和其他人直接转换为javascript，但我没有得到任何地方，无论是。我记得Cookie Clicker有这个问题，但我似乎无法在代码中找到解决方案。但是，它也使用画布代替拉斐尔。

Answer 1

用户选择应该可以正常工作，但不能以所示的格式。你不能像这样设置一个对象变量。

使用CSS样式，这是可以做到这样的...

text { 
     -moz-user-select: none; 
     -webkit-user-select: none; 
} 

jsfiddle

和略有不同的版本设置类直接...

.donthighlight { 
     -moz-user-select: none; 
     -webkit-user-select: none; 
} 

text1.node.setAttribute("class","donthighlight"); 

jsfiddle

我猜测一些旧的浏览器可能不支持这是拉斐尔经常使用的原因，并且扩展了CSS以包含其他浏览器。