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

Question

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

javascriptjqueryreferenceraphael

4

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

以下是一个包括我的问题的示例：http://jsfiddle.net/auyaC/

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

下面是出错代码：

当用户点击一个形状时，我捕获事件目标。

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的鼠标事件。

似乎在线上使用鼠标事件或触摸事件的所有示例都不起作用。

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

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

但我不再拥有触摸屏（曾经有过，但更换了屏幕并删除了驱动程序）。

Properties

所以对我来说，即使在我的计算机上http://jsfiddle.net/5BPXD也不起作用...

- Ron van der Heijden

2个回答

0

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

Raphael 似乎认为我有一个触摸屏。

"平板电脑组件" Windows 功能被打开了。在禁用此功能后，我又能够使用鼠标和触摸事件了！

Turn Windows features on or off. To turn a feature on, select its check box. To turn a feature off, clear its check box. A filled box means that only part of the feature is turned on. ... Tablet PC Components

- Ron van der Heijden

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris Wilson · Accepted Answer

通常情况下，您不希望像这样混合使用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事件。我认为这是一个小的权衡。