Steps to reproduce
- Load the attached “targetIssue.html” and click on either the red or blue box.
- An alert box stating the color of the box clicked should be displayed, but this does not happen with Edge.
Issue reproduced on:
Microsoft Edge 25.10586.0.0
Microsoft EdgeHTML 13.10586
Microsoft Edge 38.14372.0.0
Microsoft EdgeHTML 14.14372
HTML file works as expected on:
- Chrome 51.0.2704.106 m
- Firefox 47.0
- Epiphany (Web) 3.16.3, based on WebKit 2.12.3
evt.target.correspondingUseElement instead of just
Comments and activity
- Microsoft Edge Team
Changed Assigned To to “Brad E.”
FYI, the reported IE/Edge behavior is conforming to SVG 1.1 specs. Under the framework defined by SVG 1.1, the event target is not the `` element, but the
SVGElementInstancerepresenting the re-used rect. https://www.w3.org/TR/SVG11/struct.html#InterfaceSVGElementInstance
Given the poor implementation of this model in other browsers, however, SVG 2 will be redefining the use event handling model in a manner consistent with shadow DOM, hopefully leading to interoperability between browsers in the not-too-distant future.
For now, the workaround as noted by the original poster is to check for the presence of
evt.target.correspondingUseElementand if it doesn’t exist, fallback to
Of interest is that if “targetIssue.html” is rewritten using
event.currentTargetby attaching the
onclickhandlers directly to the `` elements (as in “currentTargetRewrite.html”), then
event.currentTargetwill contain an
SVGUseElementwhich is inconsistent with
event.target, and possibly with the SVG 1.1 spec.
Practically though the workaround is minor and easily integrated in.
`` elements -> <use> elements (the comment Preview should really be consistent with what will actually be shown)
The behavior of currentTarget is to spec: currentTarget is the element to which you attached the event listener function (whether with addEventListener or with an onclick attribute). The currentTarget is updated as the event bubbles up the DOM. For example, if you added an event listener on the body element of a page to respond to all mouse movements, the body would be the currentTarget when your listener receives the event.
So long as you add the listeners to the use elements directly (and not to a parent), currentTarget should be a safe, cross-browser way to access that element.
PS, I reported the issue with markdown in issue comments here: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8066307/
So the reason event.target contains an SVGElementInstance is because it actually refers to the rect element inside the use element’s non-exposed DOM tree, while event.currentTarget contains an SVGUseElement because it refers to the use element itself. Okay, it makes sense. Thanks for the explanation and for helping report the markdown issue!
- Microsoft Edge Team
Changed Assigned To to “Travis L.”
Changed Assigned To from “Travis L.” to “Eugene V.”
Changed Status to “Confirmed”