Question

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

我已尝试使用＆＃39; user-select：none＆＃39;和其他各种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以包含其他浏览器。

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

1 个答案: