javascript - Raphael JS - 单击时防止文本突出显示

Question

演示:http://jsfiddle.net/p7Lze6nh/

使用 Raphael JS 2.1.2，我试图在单击元素时禁用文本突出显示。它在 Chrome 上执行，但出于某种原因不在 IE 上执行。我目前在这台笔记本电脑上没有 FF 来测试。

代码比较简单-

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});
}

我已经尝试使用“user-select: none”和其他各种 CSS 规则，这些规则是通过示例为包含该论文的 div 找到的，但这没有用。我也试过使用

text1.userSelect = "none";

...和其他人直接进入 javascript，但我也没有得到任何结果。我记得 Cookie Clicker 有这个问题，但我似乎无法在代码中找到解决方案。但是，它也使用 canvas 而不是 Raphael。

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

我想当心一些旧的浏览器可能不支持这个，这是经常使用 Raphael 的原因，并扩展 css 以包括其他浏览器。