1

可能重复：
Raphaeljs 和 Internet Explorer，单击元素时出现问题

我试图找到一种方法来在鼠标单击从 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 元素中并在其上进行绑定。这似乎不是最干净的解决方案，所以我在这里询问是否有人有替代方法。

4

1 回答 1

5

为什么不直接使用 raphael 内置的事件编码，如下所示：

alpha.node.onclick = textClickEvent;
beta.node.onclick = boxClickEvent;

或者你也可以这样做：

alpha.click(textClickEvent);
beta.click(boxClickEvent);

您的其余代码都很好。

一些有用的链接：Raphael 事件部分和Raphael 节点部分。

于 2010-03-11T13:59:46.807 回答