javascript - Raphaeljs : How to get the elements reference back using event. 目标？

Question

目前我有一个绘制形状的小应用程序。

这是一个包含我的问题的示例:http://jsfiddle.net/auyaC/

我收到错误:Uncaught TypeError: Object [object Object] has no method 'getBBox'

下面是错误来源的剥离代码

当用户点击一个形状时，我捕捉到 event.target

var onMouseDown = function(event) {
    setBBoxes($(event.target)); // Seems OK
};

我想要 BBoxes 再次回来，但我的形状已经失去了 BBox..

var setBBoxes = function(shape) {
    shape.getBBox(); // Unable.. getBBox is part of Raphael shapes, but mine is not the real reference?
};

还有一个剥离的例子:http://jsfiddle.net/auyaC/2/

编辑

好吧，我的问题是混淆了 jQuery 和 Raphaeljs，因为我无法使用 Raphael 的鼠标事件。

网上的鼠标事件或者触摸事件的例子好像都不行。

我已经阅读了这些问题报告

• https://github.com/DmitryBaranovskiy/raphael/issues/720
• https://github.com/DmitryBaranovskiy/raphael/pull/737

Windows 还认为我有 255 个触摸点可用的触摸输入。

但我没有触摸屏了(有一个但换了屏幕并删除了驱动程序)。

所以对我来说，即使http://jsfiddle.net/5BPXD在我的电脑上不工作...

Answer 1

您通常不想像这样混合使用 jQuery 和 Raphael，因为很容易混淆您使用的是哪个库的事件处理程序和方法。当您开始直接弄乱 Raphael 创建的 DOM 元素时，您也会失去 Raphael 对旧浏览器的后备功能。

在这种情况下，我建议将 .mousedown() 监听器直接添加到 Raphael 元素。

var paper = new Raphael($(".testarea")[0], $(".testarea").width(), $(".testarea").height());
var circAttr = {
    "fill": "#4ba6e8",
    "stroke": "#1a81cc",
    "stroke-width": "2"
};

paper.circle(200, 200, 80).attr(circAttr).mousedown(function() {
    someFunction(this);
});


var someFunction = function(shape) {
    console.log(shape.getBBox());    
};

更新 fiddle :http://jsfiddle.net/auyaC/3/

当然，您将失去使用选择器一次选择所有形状并将事件同时添加到所有形状的能力。您需要在创建每个事件时将 mousedown 事件添加到它。我认为，这是一个小的权衡。