處理與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（對象或嵌入標籤）

回答

相關問題