CODEWITHSUNDEEP
javascriptcssraphael
Dinklebeeeerg
Dinklebeeeerg

Reputation: 61

Raphael JS - Prevent text highlighting when clicking

DEMO: http://jsfiddle.net/p7Lze6nh/

Using Raphael JS 2.1.2 and I'm trying to disable text highlighting when an element is clicked. It does it on Chrome, but not on IE for some reason. I don't have FF on this laptop at the moment to test.

The code is relatively 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});
}

I've tried using the 'user-select: none' and other various CSS rules found via examples for the div containing the paper, but that didn't work. I've also tried using

text1.userSelect = "none";

...and the others directly into javascript, but I didn't get anywhere, either. I recall Cookie Clicker having this problem, but I can't seem to find the solution in the code. But, it also uses canvas instead of Raphael.

Upvotes: 1

Views: 682

Answers (1)

Ian
Ian

Reputation: 13842

User select should work ok, but not in the format shown. You can't just set an object variable like that.

Using css styling, it can be done like this...

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

jsfiddle

and slightly different version setting class direct...

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

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

jsfiddle

I guess be wary some older browsers may not support this, which is a reason Raphael is often used, and extend the css to include the other browsers.

Upvotes: 6

Related Questions