1

raphael.js 文档似乎警告不要使用 element.node ，但它似乎是调用事件的唯一方法。我创建了一个 jsFiddle，它使用 3 种不同的方法为 3 种不同的形状分配 id：.attr、.data 和 .node.id。

.attr 方法我得到一个未定义的 id 警报，并且没有响应 click 事件。

.data 方法我得到了正确的警报 ID，但点击的警报未定义。

.node.id 我得到了正确的警报 id 和正确的点击警报。

有人可以帮助我最好使用哪种方法（如果 .node.id 可以）以及使用 jquery 定位这些形状的正确方法。

html：方形矩形圆

jQuery/拉斐尔

var p = Raphael("test");

$(':radio[name="shapes"]').on('click', function () {
var shapeName = $(this).attr('id');

//test attr id
if (shapeName == "square") {
    var test1 = p.rect(10, 10, 40, 40);
    test1.attr('fill', 'black');
    test1.attr('id', 'help1');
    var data1;
    data1 = test1.attr('id');
    alert(data1);
    $(test1.node).click(confirmFunc3, removeOtherNodes);
}
//test node.id
else if (shapeName == "rectangle") {
    var test2 = p.rect(200, 20, 50, 80);
    test2.attr('fill', 'blue');
    test2.node.id='help2';
    var data2;
    data2 = test2.node.id;
    alert(data2);
    $(test2.node).click(confirmFunc);
}
//test data id
else if (shapeName == "circle") {
    var test3 = p.circle(100, 100, 40);
    test3.attr('fill', 'red');
    test3.data('id', 'help3');
    var data3;
    data3 = test3.data('id');
    alert(data3);
    $(test3.node).click(confirmFunc2);
}

function confirmFunc() {
    alert(this.id);
}
function confirmFunc2() {
    alert($(this).data('id'));
}
function confirmFunc3() {
    alert($(this).attr('id'));
}
function removeOtherNodes() {
    $('#help2').remove();
    $('#help3').remove();
}
});

http://jsfiddle.net/adam123/9wUJN/115/

4

1 回答 1

3

1)element.node.id = "abc"如果您稍后需要通过 jQuery 访问元素，可以这样做 -$('#abc').on("click", doSomething);

2) 但是，当您可以使用 Raphael 时，为什么还需要将 jQuery 用于事件处理程序？

raphaelElement.mousedown(eventHandlerFunction);

或者

raphaelElement.mousedown(function(e){
   ...
});

3）你也可以这样做：

raphaelElement.id = "abc";
var thatElement = paper.getById("abc");
thatElement.mousedown(function(e){
   ...
});
于 2013-04-06T10:31:28.543 回答