向 Raphael 元素添加事件答案

【问题标题】：Adding events to Raphael elements向 Raphael 元素添加事件
【发布时间】：2011-05-23 10:20:02
【问题描述】：

嘿，我正在尝试向 SVG Raphael 矩形添加 mousemove 和 click 事件：

小提琴：http://jsfiddle.net/neuroflux/nXKbW/1/

代码：

tile = ctx.rect(x*10,y*(i*10),10,10).attr({
    fill:'#000000',
    stroke: '#ffffff'
});
tile.mouseover(function(e) {
    pX = e.pageX;
    pY = e.pageY;
});
tile.click(function() {
    console.log('x: '+pX+'| y:'+pY);
});

显然，由于某种原因，这不起作用 - 我在单击时没有输出：'(

【问题讨论】：

抱歉，很明显你已经看到了。关键是变量没有范围。检查一下jsjoy.com/blog/10/raphael-js-adding-scoped-event-handlers
我已经使用了该链接中编辑后的 Raphael.js 文件 - 但处理程序仍然没有触发 :(
好的，等一下。不知何故，你的小提琴为我挂了 IE 和 Firefox。
多么奇怪，不知道为什么……它不会让我崩溃……FF4.0.1 和 IE9
FF 3.6.17 喝了太多公羊。我已将它复制到我的系统上，我正在使用它。

标签： javascript canvas svg raphael

【解决方案1】：

好的，我已经可以使用点击功能了。最后^_^。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script type="text/javascript" src="https://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
        <script type="text/javascript">
            /* GLOBAL VARIABLES */
            var drawFrames;
            var canvas;
            var ctx;
            var universe = new Array();
            var tile;
            var pX,pY = 0;

            universe = (
                [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],
                [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],
                [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],
                [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],
                [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],
                [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],
                [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],
                [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],
                [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],
                [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]]
            );

            /* WINDOW LOAD */
            window.onload = function() {
                init();
            }

            /* INITIALISATION */
            function init() {
                ctx = Raphael(10, 50, 320, 200);
                drawFrames = setInterval(drawFrame, 40);
            }

            /* FRAME RENDER LOOP */
            function drawFrame() {
                //ctx.clear();
                for (var x = 0; x < universe.length; x++) {
                    for (var y = 0; y < universe[x].length; y++) {
                        for (var i= 0; i < 11; i++) {
                            tile = ctx.rect(x*10,y*(i*10),10,10).attr({
                                fill:'#000000',
                                stroke: '#ffffff'
                            }).click(function(e) {
                        console.log('x: '+e.pageX+'| y:'+e.pageY);
                        })
                    }
                }

            }
        }
        </script>
    </head>
    <body>
        <canvas id="main" width="800" height="600">
            <h1>No Support I'm Afraid...</h1>
        </canvas>
    </body>
</html>

【讨论】：

它必须适用于每个元素，而不是整个 rect 元素集，这就是它无法正常触发的原因。
哦，使用 ram 的原因是由于那个 setInterval！如果您使用 setTimeout 也不会发生 :)

【解决方案2】：

首先给你的 raphael 对象一个 id，然后将点击事件绑定到它。

tile = ctx.rect(x*10,y*(i*10),10,10).attr({
fill:'#000000',
stroke: '#ffffff'
});
tile.node.id='tile_id';
$('#tile_id').bind('click',function(){alert('clicked');});

【讨论】：