none
opacity: 0(完全に透明)を指定時にonclickイベントは発動しますか?

    質問

  • IE9でz-indexでは前面にあるopacity: 0な要素(background指定なし)をクリックした際にイベントが発動するかを知りたいです。
     
    IEは以前からCSSのbackground指定がないときにはイベントは発動せず、その奥にある要素のイベントが発動していたと思います。(参考
    見えないイベントレイヤーを作成するときなどです。
    これは、みなさんfilter: alpha(opacity=0);などを指定することで回避していたことだと思います。 
     
    IE9からCSS3のopacityに対応しました(参考)。
    opacity指定時はどうでしょうか?
    他のブラウザではbackground指定がないかつopacityが0でもイベントは発動します。
    ブラウザ互換性を重視すると言う話もあるため、どうなったかを知りたいと思っています。
     
    調査された方、教えていただければと思います。
     
    【参考URL】
    Elaborate description of Stacking Contexts
    上記のCSSのzIndexの話は以下の画家のアルゴリズムとほぼ同じ考え方かと思います。
     
    MSDN: opacity Attribute | opacity Property

    2011年8月23日 13:57

回答

  • IE9でも裏側にimg要素がある場合などはopacity: 0のbackground-colorなしでは突き抜けてしまいますね。

    同じような問題にあたったときはIE9でRGBAを扱えるようになったのでとりあえずbackground-colorでrgba(0, 0, 0, 0);で透過させるという回避策でなんとかしたりしました。

    2012年3月7日 3:07

すべての返信

  • IE9でも裏側にimg要素がある場合などはopacity: 0のbackground-colorなしでは突き抜けてしまいますね。

    同じような問題にあたったときはIE9でRGBAを扱えるようになったのでとりあえずbackground-colorでrgba(0, 0, 0, 0);で透過させるという回避策でなんとかしたりしました。

    2012年3月7日 3:07
  • お返事ありがとうございます。
    opacityではなく、rgbaのalpha値で回避したということですね。
    シンプルでよいですね。


    質問で最も懸念していたのは、
    突き抜けるのを防ぐため、background指定した場合に、
    見た目上bakcground指定を打ち消す手段の確保が必要になってくるのですが、
    その手段としてopacity: 0は、filter: alpha指定の代替の1つとして使用可能かどうかでした。
     
    今手元のIE10CPで確認するとopacityでも可能のようです。
    回避手段が増えてきたので、filterが廃止になっても安心ですね。

    他にも回避手段がありましたら、教えていただきたいと思います。
    (特になければ、3日後ぐらいにクローズいたします)

    2012年3月7日 14:52
  • クリックジャックとかありますから、透明要素をクリックさせるという行為そのものを避けた方がいいように思います。場合によってはセキュリティ対策ソフトなどが警告しかねないかなと。
    2012年3月8日 0:04
  • リスクがありそうということですね。

    リスク感は多少感じており、
    他にやりたいことを実現するための、セキュアで確実に動作する、
    よりよい実現手段が見つかれば、、という思いがあります。

    2012年3月8日 16:14