1

私はjQueryを使用して、このコードを使用してSVGを表示する要素を動的に追加しています:

someEl = ('#someElement');
cancelButton = $(document.createElement('object')).attr({
            'class': 'cancelButton',
            'id':parent_id+'_xbtn',
            'data': 'img/cancelBtn.svg',
            'type': 'image/svg+xml'
        });
someEl.after(cancelButton);

function cancel() {
    alert('asd');
}
cancelButton.click(cancel);

そして、この CSS を使用して手でホバーするようにスタイルを設定します。

.cancelButton:hover {
    cursor: hand;
    cursor: pointer;
}

ただし、最初に要素をホバーすると、マウスポインターが変化しないことがわかりました。ただし、要素自体を変更するホバー効果 (背景色の変更など) は正常に機能します。次に、添付した jQuery クリック ハンドラも起動しません。

<object>これは、要素または SVG の動作の制限ですか? コメントや提案をいただければ幸いです。

4

1 に答える 1

2

私の経験では、要素として埋め込まれた SVG<object>はポインター イベントを飲み込む傾向があります (ブラウザーが iframe と同様に object 要素内に新しいドキュメントを作成するため)。<img>タグだけを使用できない理由はありますか? 例えば：

someEl = ('#someElement');
cancelButton = $('<img>').attr({
    'class': 'cancelButton',
    'id':parent_id+'_xbtn',
    'src': 'img/cancelBtn.svg'
});
someEl.after(cancelButton);

function cancel() {
    alert('clicked');
}
cancelButton.click(cancel);

編集：

タグを使用する必要がある場合<object>(たとえば、SVG ファイルが外部アセットを参照するため)、私の解決策は、同じ幅と高さの透明なオーバーレイ div を作成し、オブジェクトの上部に絶対に配置し、代わりにその div にイベントをバインドすることです。 .

于 2013-02-09T08:07:15.017 に答える