我试图找到一种方法来在鼠标单击从 Raphael JS 生成的某些文本时触发事件。在 Firefox 中,click 事件完美运行,在 IE 7 和 8(我没有测试过早期版本)中,click 和 mousedown 都不起作用。Click 适用于其他 raphael 对象,例如示例中的矩形。
如何在以下演示中给出的文本上触发事件:
<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>
我的直觉是我可能不得不尝试操纵 DOM 以将文本包装在例如 A 元素中并在其上进行绑定。这似乎不是最干净的解决方案,所以我在这里询问是否有人有替代方法。