1

重複の可能性:
Raphaeljs と Internet Explorer、要素をクリックしたときの問題

Raphael JS から生成されたテキストをマウスでクリックしたときにイベントをトリガーする方法を見つけようとしています。Firefox では、クリック イベントは完全に機能します。IE 7 および 8 (以前のバージョンはテストしていません) では、クリックもマウスダウンも機能しません。クリックは他の 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 events sectionおよびRaphael node section。

于 2010-03-11T13:59:46.807 に答える