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.