Raphaeljs：如何使用event.target取回元素引用？

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
};

我希望BBox再次返回，但我的形状丢失了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());    
};

更新的小提琴： http : //jsfiddle.net/auyaC/3/

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

Answer 2

我终于找到了解决我的错误的方法...

拉斐尔似乎以为我有触摸屏。

Windows“平板电脑组件”功能已打开。 禁用此功能后，我可以再次使用鼠标并触摸事件！