0

Raphael.js を使用して多数の形状を描画し、マウスがロールオーバーしたときに影を追加して少し拡大する必要があります。Firefox と Chrome ではすべて問題なく動作していますが、Internet Explorer ではmouseoutイベントが発生していないように見えます。

これはmouseover/mouseout各六角形のコードです (六角形はラファエル要素への参照であり、this/_Promiseとりわけイベントを定義するクラスへの参照です):

    this.hexagon.mouseover(function(){
        _Promise.hexagon.toFront();
        _Promise.hexagon.attr( { "transform": "...s" + scaleAmountOnRollover } );
        _Promise.shadow = _Promise.hexagon.glow({ "width": 8, "opacity": 0.4 });
    });

    this.hexagon.mouseout(function(){
        _Promise.hexagon.attr( { "transform": "...s" + (1/scaleAmountOnRollover) } );
        _Promise.shadow.remove();
    });

mouseoutIE (バージョン 9 まで) では、イベントが発生していないため、六角形がどんどん大きくなっていきます。console.logsこれが間違いなく当てはまることを確認するために、そこにいくつか入れました。

任意の提案をいただければ幸いです!

4

1 に答える 1

1

IE ではイベント バブリング メカニズムが異なるため、mouseover/mouseoutイベントの動作が不安定になりますが、その革新 (はい、まだ IE の話です!) が役に立ちます。

一貫した動作を実現するために、標準の代わりにIE のmouseenterandを使用できます。もちろん、Raphaël の API から降りて、これらを個別に実装する必要があります。別のイベント リスナーをバインドし、IE 固有のイベント タイプを渡す必要があります。バージョン 9 以降。mouseleavemouseovermouseoutattachEventaddEventListener

これらの IE 固有のイベントの詳細については、対象の quirksmode の記事を参照してください。

これにjQueryを使用したい場合は、APIの一部としてmouseleaveを提供することで、すでにそれを考えています.

于 2012-05-09T15:08:16.457 に答える