Raphaeljs: How to return link elements using event.target?

Question

I currently have a small application for drawing shapes.

Here is an example that includes my problem: http://jsfiddle.net/auyaC/

I get an error: Uncaught TypeError: Object [object Object] has no method 'getBBox'

Below is the code in which the error occurs from

When the user clicks on the shape, I will catch event.target

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

I want the BBoxes back again, but my form has lost the BBox.

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

And a separation example: http://jsfiddle.net/auyaC/2/

Edit

So my problem was mixing jQuery and Raphaeljs, because I cannot use mouse events in Raphael.

None of the online examples using mouse events or touch events seem to work.

I read these problem reports

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

Windows also thinks I have touch input available for 255 touch points.

But I no longer have a touch screen (there is one, but a modified screen and remote drivers).

So, for me, even http://jsfiddle.net/5BPXD does not work on my computer ...

Answer 1

I finally found a fix for my error ...

Rafael seems to think that I have a touch screen.

The Windows Tablet PC Features feature is enabled. After disabling this feature, I was able to use the mouse again and touch events!

Answer 2

As a rule, you do not want to mix jQuery and Raphael, as this is easily confused with what library handlers and methods you use. You also lose the Raphael backup options for older browsers when you start directly messing with the DOM elements that Raphael creates.

In this case, I recommend adding the .mousedown() listener directly to the Raphael element.

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

Updated script: http://jsfiddle.net/auyaC/3/

Of course, you lose the ability to immediately select all the shapes using the selector and add an event to all of them at once. You will need to add a mousedown event to each one created. A little compromise, I think.