Handling Events in SVG elements in Ember


#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.


#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.