Click event on SVG <use> element firing on <defs> -> <use>

Issue #15727705 • Assigned to Bogdan B.

Open new issue

Browse all tracked issues

Details

Author
Porter M.
Created
Jan 31, 2018
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
16.16299
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Steps to reproduce

  1. Load the attached “eventIssue.html” open and open developer tools.
  2. Click on SVG element.

As you can see, event firing on <g id="italian-flag"> inside <defs>. Not inside the <g id="svg-group">.

Issue reproduced on:

  • Edge/16.16299

Event.target.parentNode works fine on:

  • Chrome
  • Opera
  • IE
  • Edge 15
  • Firefox
  • Safari

Attachments

2 attachments

Comments and activity

  • Microsoft Edge Team

    Steven K. Feb 1, 2018 2018-02-01T00:32:14.073Z

    Changed Assigned To to “Steven K.”

    OSG V. Feb 1, 2018 2018-02-01T01:20:08.437Z

    Changed Assigned To to “Travis L.”

    OSG V. Feb 1, 2018 2018-02-01T23:00:07.28Z

    Changed Assigned To to “Bogdan B.”

  • Francois R. Feb 2, 2018 2018-02-02T19:08:16.46Z Microsoft Edge Team

    Thanks for the report. IE and Edge used to have problems with hit-testing for USE elements pointing to external svg files, and I guess this new issue is the result of the changes that have been done to fix that. 

    As you noted, we still fire the click event on the <use> element, but we also fire it on the elements that have been clicked in the other document if they are in a scriptable context. As it turns out, this changes the eventTarget in case these elements are actually in the same document (USE elements pointing to internal svg nodes). 

    You can use event.currentTarget if you need the element on which the event is currently being fired. It is not clear to me our behavior here is a bug, but we will probably try to match other browsers if we see websites being affected.

  • Porter M. Feb 4, 2018 2018-02-04T16:45:04.057Z

    @Francois R. I cant use "event.currentTarget", because it returns me "undefiend". How i can get parentNode?

  • Francois R. Mar 28, 2018 2018-03-28T23:29:07.007Z Microsoft Edge Team

    Sorry, I hadn’t seen this message. I added a modified of your test case that shows how to obtain the <use> element with currentTarget.

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

Sign in