No direct link to event target when SVG <use> is used

Fixed Issue #7998724

Details

Author
Khairul A.
Created
Jun 26, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
Found in build #
14.14372
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

  1. Load the attached “targetIssue.html” and click on either the red or blue box.
  2. 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

and:

Microsoft Edge 38.14372.0.0
Microsoft EdgeHTML 14.14372

HTML file works as expected on:

  1. Chrome 51.0.2704.106 m
  2. Firefox 47.0
  3. Epiphany (Web) 3.16.3, based on WebKit 2.12.3

Workaround: use evt.target.correspondingUseElement instead of just evt.target

Attachments

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 SVGElementInstance representing 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.correspondingUseElement and if it doesn’t exist, fallback to evt.target.

  • Of interest is that if “targetIssue.html” is rewritten using event.currentTarget by attaching the onclick handlers directly to the `` elements (as in “currentTargetRewrite.html”), then event.currentTarget will contain an SVGUseElement which 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”

  • I haven’t run a detailed analysis of the new implementation, but in EdgeHTML 15 event.target now points to the SVGUseElement.

  • Confirmed. Thanks!

  • Microsoft Edge Team

    Changed Status from “Confirmed” to “Fixed”

  • Hello,

    Thank you for providing this information about the issue. We are pleased to report this feature is fixed in Edge 16257 and is available in our latest Insider Preview build in the Fast ring.

    Best Wishes,
    The MS Edge Team

You need to sign in to your Microsoft account to add a comment.

Sign in