jquery.belatedPNG でイベント捕捉
jquery.belatedPNG を使用した際のイベント捕捉。belatedPNG でもやり方は同様です。
手を加えた jquery.belatedPNG
- https://github.com/zaininnari/jquery.belatedPNG
- jquery.belatedPNGから fork して追加しました。
問題
fixPng() をした要素でクリックイベントを捕捉できない。
http://jsdo.it/zaininnari/xOn3
↑の例では、2番目。
これは、
fixPng() を適用した要素を内部で、
{visibility: hidden}を適応、または、その同位置に top, left でVML要素を配置しているため、
本来イベントを設定した要素に触れることができないために発生します。
回避策
本来の要素を this で取得する場合、fixpng で生成した画像のある要素は、
this.vml.image.shape で取得できるので、
- fixpng を適応した要素(IE6-8)
- this.vml.image.shape
- fixpng を適応していない要素(IE6-8以外)
- this のまま
と、切り替えることで、意図したマウスイベントを発火させることができます。
jsdo.it の例では、
jquery.belatedPNG に手を加えて、
fixPng() を適用した要素に属性「isFixedPng」を付加しています。
未解決
- css の適応(継承)
- jsdo.it にあるものでは、img{cursor: pointer} を適応しているが、fixpng したものには適応されていない。(別の要素のため。class での指定をコピーすればいけなくもない？)
捕捉
- IE6 は、png の透過をサポートしていない
- IE7-8 では、png の透過をサポートしているが、不完全
- opacity を適応すると、アルファチャンネル部分が黒くなる
- pngfix + opacity の組み合わせ問題については、下記が参考になります。
