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

我想让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());    
};

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

当然，您无法使用选择器一次选择所有形状，并立即将事件添加到所有形状。您需要在创建时为每个事件添加mousedown事件。我认为，小的权衡。

Answer 2

我终于找到了修复我的错误...

拉斐尔似乎认为我有一个触摸屏。

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