Handling events with SVG control in Enyo 2.0 (object or embed tag)

Question

I have this control for loading a SVG-document (works, the SVG displays fine)

enyo.kind({
    name: "SvgParser",
    kind:"Control",
    fit: true,
    published: {
        source:''
    },
    components:[{ 
        tag: "object", // Or Embed
        name:'svgObject', 
        classes: 'SvgObject',
        ontap:'click',
        onload:'loaded'
    }],
    create: function() {
        this.inherited(arguments);
        this.sourceChanged();
    },
    click: function(inSender, inEvent) {
        console.log('click'); // doesn't happen
    },
    sourceChanged: function() {
         this.$.svgObject.attributes.type = 'image/svg+xml';
         this.$.svgObject.attributes.data = this.source;
    },
    loaded: function(inSender, inEvent) {
         console.log('loaded'); // doesn't happen
    }
});

but the event-handlers for 'tap' and 'load' never are triggered, can somebody explain me what i'm doing wrong? Thanks in advance

Answer 1

You actually have two separate problems, one preventing the load handler from working and the other preventing the tap handler from working.

The load handler isn't being called because you need to tell Enyo to listen for the load event on the <object> tag. You can do this with a call to enyo.makeBubble().

The tap handler isn't being called because click/tap events on an <object> tag containing an SVG image are routed into the DOM of the image itself. To intercept them in HTML, you'll need to wrap the <object> in a transparent <div> and give the <object> a negative z-index.

I've made a fiddle illustrating both techniques here: http://jsfiddle.net/rbWMr/

For background on the SVG-wrapping technique, see Making an svg image object clickable with onclick, avoiding absolute positioning.