Question

可能重复：
Raphaeljs and Internet Explorer, problem when clicking an element

我正试图找到一种方法来触发事件，当鼠标点击Raphael JS生成的某些文本时。在Firefox中，点击事件完美地运行，在IE 7和8中（我没有测试过早期版本）既没有点击也没有mousedown工作。点击适用于其他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元素并在其上绑定。这似乎不是最干净的解决方案所以我在这里询问是否有人有另一种方法。

Answer 1

为什么不直接使用像这样的raphael内置事件编码：

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

或者您也可以这样做：

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

你的其余代码很好。

一些有用的链接：Raphael events section和Raphael node section。

如何使用Raphael和jQuery检测IE上的点击或鼠标按下

1 个答案: