在 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 侦听 <object> 标记上的load事件。您可以通过调用 enyo.makeBubble() 来执行此操作。

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

我在这里做了一个小提琴来说明这两种技术：http://jsfiddle.net/rbWMr/

有关 SVG 换行技术的背景信息，请参阅使用 onclick 使 svg 图像对象可单击，避免绝对定位。

Answer 2

事件

未被触发，因为您尝试在尚未创建 Enyo 组件的 DOM 节点时修改 DOM 节点属性。DOM 节点是在渲染组件时创建的。将 sourceChanged（） 函数移动到控件的 rendered（） 函数，或者如果你在控件的 create（） 函数中需要它，请在控件上调用 hasNode（） 以强制它首先创建 DOM 节点。试试这个版本的 sourceChanged（） 函数，看看它是否有效：

sourceChanged: function() {
    var svgObj = this.$.svgObject;
    if (svgObj.hasNode()) {
       svgObj.setAttribute("type", 'image/svg+xml');
       svgObj.setAttribute("data", this.source);
    }
},