获取 snap.svg 中单击元素的 ID

mwa*_*sch 0 javascript snap.svg

在snap.svg http://snapsvgid的事件处理函数(例如单击回调函数)中获取属性(或基本上帮助我识别事件发生的元素的任何属性)的最佳(跨浏览器)方法是什么.io/

这是一些代码。我尝试过的方法似乎适用于最新的 Chrome 和 FF,但我想知道是否有更好的方法。

    //add an Element, set id
    var mySvg = Snap('#mySvg');
    var myRect = mySvg.rect(10,10,200,100);
    myRect.attr({id:'myId'});

    //register click callback
    myRect.click(clickCallback);

    //click callback
    var clickCallback = function(event) {
       // how do I get the id of the clicked element?
       // is this cross browser valid?
       var id = event.target.attributes.id.nodeValue;
    };
Run Code Online (Sandbox Code Playgroud)

Ian*_*Ian 5

我认为当前版本的 Snap 和 id 存在问题,该问题已在下一个版本中修复(0.2 目前可能是最新版本)https://github.com/adobe-webplatform/Snap.svg/issues/166所以值得在某个时刻阅读。

然而,在这些情况下我通常不会使用这样的 id,我会使用“this”。所以对于处理程序来说,它可能看起来像......

var mySvg = Snap(400, 620);
var myRect = mySvg.rect(10,10,200,100);

var clickCallback = function(event) {
    this.attr({ fill: 'blue' });
};

myRect.click(clickCallback);
Run Code Online (Sandbox Code Playgroud)

jsfiddle在这里http://jsfiddle.net/qgTdF/2/

该解决方案可能适合您,并且更可取,但这最终取决于您是否需要做其他事情(在这种情况下,可能会针对特定问题发布另一个问题)。如果您需要稍微调整一下并专门使用 id,那么也可能值得尝试最新版本(我认为是 0.2)。

  • 尽管这个问题已经得到解答,但也应该指出:Snap Elements 有一个用于设置键/值对的 [.data 方法](http://snapsvg.io/docs/#Element.data)。因此,在创建像矩形这样的元素时,很容易设置一些自定义数据,例如“myRect.data('myId',999);”,稍后在(单击)回调函数中,您可以使用“var id = this”获取它.data('myId');` (4认同)