javascript - 在 Enyo 2.0 中使用 SVG 控件处理事件(对象或嵌入标记)

Question

我有这个用于加载 SVG 文档的控件(有效，SVG 显示正常)

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

但是“tap”和“load”的事件处理程序永远不会被触发，有人能解释一下我做错了什么吗？提前致谢

Answer 1

你实际上有两个不同的问题，一个阻止了 load处理程序停止工作，另一个阻止 tap处理程序停止工作。

load处理程序未被调用，因为您需要告诉 Enyo 监听 load <object> 上的事件标签。您可以通过调用 enyo.makeBubble() 来完成此操作.

tap处理程序未被调用，因为在 <object> 上单击/点击事件包含 SVG 图像的标签被路由到图像本身的 DOM 中。要在 HTML 中拦截它们，您需要包装 <object>在透明的<div>并给出 <object>负面z-index .

我在这里制作了一个 fiddle 来说明这两种技术:http://jsfiddle.net/rbWMr/

有关 SVG 包装技术的背景，请参阅 Making an svg image object clickable with onclick, avoiding absolute positioning .