Handling Events in SVG elements in Ember

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

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>

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

For those interested, I’ve created bug report.

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
  }
})

Thanks, as a workaround that works.