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处理程序，因为包含SVG图像的<object>标记上的点击/点击事件被路由到图像本身的DOM中。要在HTML中拦截它们，您需要将<object>包装在透明的<div>中，并将<object>设为否定z-index。

我在这里说了两种技巧：http://jsfiddle.net/rbWMr/

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

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

使用Enyo 2.0中的SVG控件处理事件（对象或嵌入标记）

2 个答案: