Skip to content
This repository has been archived by the owner on Feb 11, 2021. It is now read-only.

Uncaught TypeError with SVG <use> elements. #124

Closed
madmed88 opened this issue Jan 28, 2014 · 3 comments · Fixed by #128
Closed

Uncaught TypeError with SVG <use> elements. #124

madmed88 opened this issue Jan 28, 2014 · 3 comments · Fixed by #128

Comments

@madmed88
Copy link

When I hover over SVG elements I get this error: Object # has no method 'contains' pointerevents.dev.js:517
http://jsfiddle.net/VWw4T/ Only on chrome
@dfreedm
Copy link
Contributor

dfreedm commented Jan 28, 2014

Ah, All Nodes are supposed have a .contains method to check if a given node is inside of another one (MDN)

I was using that to know when to fire the pointerenter and pointerleave events. I was sure that SVG elements were supposed to have that function, but I guess not :/

@madmed88
Copy link
Author

Is there any workaround?
On Jan 28, 2014 7:22 PM, "Daniel Freedman" [email protected] wrote:

Ah, All Nodes are supposed have a .contains method to check if a given
node is inside of another one (MDNhttps://developer.mozilla.org/en-US/docs/Web/API/Node.contains
)

I was using that to know when to fire the pointerenter and pointerleaveevents. I was sure that SVG elements were supposed to have that function,
but I guess not :/

Reply to this email directly or view it on GitHubhttps://github.com//issues/124#issuecomment-33507584
.

@dfreedm
Copy link
Contributor

dfreedm commented Jan 28, 2014

Actually it's more complicated, but possibly easier to understand. The <use> element is the culprit. In Chrome, the event target is an SVGElementInstance, which is not a real node (more like a ShadowRoot, minus some API). If I treat it as such, then I can probably work around it.

I'm going to confer with someone more knowledgeable about Chrome's SVG to verify.

dfreedm added a commit that referenced this issue Jan 28, 2014
@dfreedm
Workaround <use> element event path
fdf80d6 
The SVG <use> element has a horrifying "instance tree" related to ShadowDOM, but does not retarget.
The SVGElementInstance (the instanceRoot type) has parts of a Node's API, but not all (like .contains).
For native events the SVGElementInstance will bubble events up to the <use> element, even non-bubbling events like enter
and leave, but it will not do so when dispatchEvent is called on it with a non-bubbling event.
Only Safari, IE, and Chrome implement this monstrosity, and working group seems to agree it should be removed:
http://lists.w3.org/Archives/Public/www-svg/2014Jan/0014.html

This workaround rewites event.target and relatedTarget to refer to <use> elements and not their "instance trees".
Fixes #124
@dfreedm dfreedm mentioned this issue Jan 28, 2014
Merged
@bergie bergie mentioned this issue Mar 8, 2014
Closed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Workaround <use> element event path jquery-archive/PEP
2 participants
@dfreedm @madmed88