4

我有这个用于加载 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'的事件处理程序永远不会被触发，有人可以解释我做错了什么吗？提前致谢

4

2 回答 2

3

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

处理程序没有被调用，load因为您需要告诉 Enyo 监听标签load上的事件。<object>您可以通过调用 来做到这一点enyo.makeBubble()。

处理程序没有被调用，因为包含 SVG 图像的标签上的tap点击/点击事件<object>被路由到图像本身的 DOM 中。要在 HTML 中拦截它们，您需要将 包裹<object>在一个透明的中<div>并给出<object>一个否定的z-index。

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

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

于 2012-11-13T13:38:44.507 回答
1

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

sourceChanged: function() {
    var svgObj = this.$.svgObject;
    if (svgObj.hasNode()) {
       svgObj.setAttribute("type", 'image/svg+xml');
       svgObj.setAttribute("data", this.source);
    }
},
于 2012-11-13T06:30:42.547 回答