Handling Events in SVG elements in Ember

Questions General
1

Hi, I’m building some SVG graphs and I need to bind action on mouseEnter.

I’ve tried to attach action on <rect> element but it is not working.

<rect onMouseEnter={{action "log"}}></rect>

I’ve tried the same on <div> element and it to my surprise works.

I’ve also tried to handle it with native javascript and that to also works.

<rect onmouseenter="javascript:alert('native works')"></rect>

Am I doing something wrong or is SVG treated somehow special in Ember?

Thank you :pray:

Here’s the twiddle

2

That seems like a bug to me and you should probably file an issue.

But as a workaround you can use the other form of action, which seems to work for me:

<rect
    style="pointer-events: all;"
    width="100"
    height="100"
    fill="red"
    {{action "log" "ember works" on="mouseEnter"}}
  ></rect>
3

Thanks, but this handler doesn’t include mouse event data (I need access to mouse coordinates) so it’s good only in certain situations.

4

For those interested, I’ve created bug report.

https://github.com/emberjs/ember.js/issues/17221

5

Try making your <rect> element a component and then use Ember’s built-in event handlers… it works for me

//svg-rect.js
import Component from '@ember/component';

export default Component.extend({
  tagName: 'rect',

  mouseEnter(event) {
    // event works here
  }
})
6

Thanks, as a workaround that works.