LoginSignup
4
3

More than 5 years have passed since last update.

aタグにObjectタグをネストしている時にObject要素をクリックして画面遷移させる方法

Posted at

問題の概要

こちらのブログ(http://subtech.g.hatena.ne.jp/mayuki/20120212/1329046476) に記載されてる内容なのですが、ここに記載されてる解決策がIE8だとどうにも全くうまく行かず、やむなくObjectの上にblockにしたa要素を乗せてもz-indexガン無視されてリンクがクリック出来ないという大変にファッキンな現象に陥りました。

要するに、この問題についてIE8上では

  • aに内包されているobject要素をクリックしてもリンクしない
  • マウスオーバーしても指カーソルにならない
  • objectの上にa要素をblockで乗せてもz-indexが無視されobjectが前面に出てきて しまう

という状態になったのでした。

 取り敢えずobjectをクリックしたら画面遷移させる

aタグにonclickイベントを付与して、子要素のobjectがクリックされた時にイベントバブリングで発火させることにして、以下のようにした。
別窓で開かないし指カーソルにならないし、だいぶひどいけど、緊急用の対応としては使えるかも・・・ぐらいです。

$('object').each(function(){
    if($(this).parent().is('a')){
        var _href = $(this).parent().attr('href');
        $(this).parent().on('click',function(){
            window.location.href = _href;
        })
    }
})
4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3