处理与SVG控制事件在Enyo 2.0（对象或嵌入标签）

我有这种控制用于加载SVG文档（工程，SVG显示细腻）处理与SVG控制事件在Enyo 2.0（对象或嵌入标签）

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

但事件处理程序“抽头'和'负载'从未被触发，有人可以解释我做错了什么吗？在此先感谢

来源

2012-11-12 Pieter Willaert

你确实有两个不同的问题，一是防止工作load处理程序和其他防止tap处理程序无法正常工作。

load处理程序未被调用，因为您需要告知Enyo侦听<object>标记上的load事件。您可以拨打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。

来源

2012-11-13 13:38:44

完美答案！谢谢 –

事件不会被触发，因为当您尚未创建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); 
    } 
},

来源

2012-11-13 06:30:42

thx为快速回复，但它仍然无法正常工作。它看起来像我的问题是有点相关的这个http://stackoverflow.com/questions/13298974/object-tag-with-svg-and-doubleclick-events?rq=1 –

我做了一个小提琴来解释它好一点http://jsfiddle.net/Fn5j7/2/ –

处理与SVG控制事件在Enyo 2.0（对象或嵌入标签）

回答

相关问题