PC表示時のみaタグのリンクを機能させないJS

ページに図表や細かい文字が多い画像を貼ったとき、PC表示では大きく取り扱っているがスマートホン表示時には拡大して表示させたい、なんてことが起こりえます。今回はそんなときにaタグの機能を制限するreturn:falseの活用法です。

HTMLの記述

<p><a class="pc-nolink" href="https://01earth.jp"><img src="aaa.png"></a></p>

機能させたくないaタグにクラスを設定します。

JSの記述

$(window).load(function() {
  jQuery(function(){
    var w = jQuery(window).width();
    var x = 667;
    if (w >= x) {
      $(function(){
        $(".pc-nolink").click(function(){
          return false;
       });
      });
    }
  });
});

ページに上記のJSとjQueryを読み込みます。aタグに画面の横幅依存でreturn:falseを適用することで、横幅667px以上の画面で表示しているときはクリックしてもリンクが開かない動作になります。

CSSの記述

.pc-nolink{
  cursor:default;
}

PC表示時にaタグにオンマウスするとリンク可能を示す指アイコンになってしまうので、これを矯正します。これで使い勝手と見栄えが揃います。