Possible Duplicate:
Raphaeljs and Internet Explorer, problem when clicking an element
I’m trying to find a way to trigger an event when a mouse clicks on some text generated from Raphael JS. In Firefox, the click event works perfectly, in IE 7 and 8 (I haven’t tested earlier versions) neither click nor mousedown work. Click works fine for other raphael objects, e.g. the rectangle in the example.
How can I trigger an event on the text given in the demonstration below:
<html>
<head>
<script type="text/javascript" src="http://github.com/DmitryBaranovskiy/raphael/blob/master/raphael-min.js?raw=true"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
</head>
<body>
<div id="graph"></div>
<script language="javascript">
function setupImage() {
var canvas = Raphael(graph, 200, 200);
var alpha = canvas.text(100, 10, "Two Words");
alpha.attr("font-size", "20px");
var beta = canvas.rect(50, 50, 50, 50);
beta.attr("fill", "#3333cc");
canvas.safari();
var textClickEvent = function(event) {
alert("text clicked");
};
var boxClickEvent = function(event) {
alert("box clicked");
};
$(alpha.node).click(textClickEvent);
$(beta.node).click(boxClickEvent);
}
$(window).load(setupImage);
</script>
</body>
</html>
My gut feeling is I may have to try manipulate the DOM to wrap the text in, e.g., an A element and bind on that instead. That doesn’t seem like the cleanest solution so I’m asking here to see if anyone has an alternative approach.
Why not just use the raphael built in event coding like this:
or you could also do this:
The rest of your code is fine.
Some helpful links: Raphael events section and Raphael node section.