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実際には、ハンドラーの動作を妨げるものとハンドラーの動作を妨げるものという 2 つの別々の問題がありtapます。

Enyo にタグのイベントloadをリッスンするように指示する必要があるため、ハンドラーは呼び出されていません。への呼び出しでこれを行うことができます。load<object>enyo.makeBubble()

SVG 画像を含むタグのクリック/タップ イベントは画像自体の DOM にルーティングされるため、tapハンドラーは呼び出されません。HTML でそれらをインターセプトするには、 を透明で<object>ラップし、負の を与える必要があります。<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 に答える