Aurelia click.delegate not working on object element, mouseover.delegate works fine

Question

I have a simple aurelia view and view model. In my view, I have an object that points to an svg and I am able to do mouseover.delegate="domouseover()" mouseout.delegate="domouseout()", but when I try to use click.delegate="doClickSVG" the doClickSVG() method is never invoked! What am I doing wrong? Please help, I have spent many hours trying to figure this out!

I also have an img which points to an SVG in another div, and when I do a click.delegate="doClickSVG()" it calls it just fine.

I've tried all sorts of stuff to get the click.delegate to work with an object, like making it click.trigger. I even put the click.delegate on a parent element to see if that would help, but no luck.

View

<object class="vehicle-icon vehicle-icon-selected" type="image/svg+xml" id="svgId"
        data="e-3.svg" height="50" width="50" viewBox="0 0 50 50"
        mouseover.delegate="domouseover()" mouseout.delegate="domouseout()" 
        click.delegate="doClickSVG()">

</object>

<div>
    <img src="e-3-old.svg" click.delegate="doClickSVG()"/>
</div>

View-Model export class App { message: string = 'Welcome to Aurelia!';

domouseover() {
    document.getElementById(event.srcElement.id).style.backgroundColor = "yellow";
    document.getElementById(event.srcElement.id).getSVGDocument().getElementById("fillColor").style.fill = "blue";
}
domouseout() {
    document.getElementById(event.srcElement.id).style.backgroundColor = "white";
    document.getElementById(event.srcElement.id).getSVGDocument().getElementById("fillColor").style.fill = "green";
}

doClick() {
    alert("in doClick");
}

doClickSVG() {
    alert("in doClickSVG");
}

} enter code here

If you put together a reproduction of this issue using the Aurelia Gist we'll be able to help you more easily. — Jeremy Danyow

haiau79 haiau79 · Accepted Answer · 2016-04-27T05:44:31

Here's an example: https://gist.run?id=cef24c98e01402db7e7335464ff9e513

app.html

<template>
  <object type="image/svg+xml" id="svgId"
        data="e-3.svg" height="50" width="50" viewBox="0 0 50 50"
        mouseover.delegate="domouseover()" mouseout.delegate="domouseout()" 
        click.delegate="doClickSVG()">

  </object>

  <div>
      <img src="e-3.svg" click.delegate="doClickSVG()"/>
  </div>
</template>

app.js

export class App { 
  message: string = 'Welcome to Aurelia!';

  domouseover() {
      document.getElementById(event.srcElement.id).style.backgroundColor = "yellow";
      document.getElementById(event.srcElement.id).getSVGDocument().getElementById("fillColor").style.fill = "blue";
  }
  domouseout() {
      document.getElementById(event.srcElement.id).style.backgroundColor = "white";
      document.getElementById(event.srcElement.id).getSVGDocument().getElementById("fillColor").style.fill = "green";
  }

  doClickSVG() {
      alert("in doClickSVG");
  }
}

Aurelia click.delegate not working on object element, mouseover.delegate works fine

2 Answers