4

わかりました、メニュー項目のクリック イベントをキャプチャしようとしています

これが私のhtmlです：

<nav>
<ul>
    <li class="active left" id="profileLink">
        <object type="image/svg+xml" data="public/img/nav/profile.svg">    
                <img src="public/img/nav/profile.png" alt="Blue Square"/>     
        </object>
    </li>
    <li class="left" id="suggestionsLink">
        <object type="image/svg+xml" data="public/img/nav/suggestions.svg">    
                <img src="public/img/nav/suggestions.png" alt="Blue Square"/>     
        </object>
    </li>
    <li class="right" id="settingsLink">
        <object type="image/svg+xml" data="public/img/nav/settings.svg">    
                <img src="public/img/nav/settings.png" alt="Blue Square"/>     
        </object>
    </li>
    <li class="right" id="statisticsLink">
        <object type="image/svg+xml" data="public/img/nav/statistics.svg">    
                <img src="public/img/nav/statistics.png" alt="Blue Square"/>     
        </object>
    </li>

    <li class="middle" id="friendsLink">
        <object type="image/svg+xml" data="public/img/nav/friends.svg">    
                <img src="public/img/nav/friends.png" alt="Blue Square"/>     
        </object>
    </li>
</ul>

そして、ここに私が使用しているスクリプトがあります:

    $("#wrapper").on("click", '#friendsLink', function(){
       console.log('test');
       loadFriends();
    });

スクリプトを使用してプレーンな a-tag を選択すると問題なく動作しますが、この svg オブジェクトではまったく動作しません。li要素のパディング領域をクリックすると機能することに注意してください。ただし、svg-image 領域をクリックしたときはそうではありません。

このスレッドの投稿は、svg dom が html dom とは異なるため、jquerys イベントが失敗することを示唆しています。

jQuery セレクター + SVG 非互換?

SVG要素でクリックイベントを処理しようとするときの方法は何ですか?

ヘルプは大歓迎です

4

1 に答える 1

3

使用したい場合<object>は、svg コンテンツ、つまり<svg>public/img/nav/profile.svg などのルート要素にクリック処理を配置する必要があります。

処理をそのまま維持したい場合は、要素ではなく<image>要素をコンテナーとして使用する必要があります。ただし、スクリプトやフォールバックがないなど、独自の制限があります。<svg><object>

3 番目のオプションは、各 svg 要素の上に絶対位置の透明な div を配置し、onclick を処理することです。

ニーズに最も適したソリューションを選択する必要があります。

于 2012-11-05T19:23:30.587 に答える