リンクエリアをブロック要素全体に広げ、新しいタブで開くキーボードショートカットに対応する

近年、スマホ等で閲覧した際のユーザビリティを考慮して、クリックやタップできるリンク範囲を広げる手法がよく使われています。

• HTML5 で複数のブロック要素を a 要素で囲む方法
• CSS の position プロパティを使って a 要素を直前のブロック要素に被せる方法
• jQuery を使って a 要素を含むブロック要素のクリックに反応させる方法

などありますが、jQuery を使う方法は私もよく使います。

以前から多くのブログ等で紹介されている記述は次のようなものです。

$(function(){
  $('div.linkBox').click(function(){
    window.location = $(this).find('a').attr('href');
    return false;
  });
});

ただ、この方法は本来のリンク要素外の範囲では、リンク先を新しいタブで開くキーボードショートカットに反応しません。Windows では [ctrl] キーを、Mac では [command] キーを押しながらクリックすると、リンク先が新しいタブで開くというものです。

このキーボードショートカットに対応させるためには、クリックイベント発生時に対象のキーが押されたか否かを調べる必要があり、Windows の [ctrl] キーは .ctrlKey、Mac の [command] キーは .metaKey で取得することができます。

$(function(){
  $('div.linkBox').click(function(event){
    var href = $(this).find('a').attr('href');
    if ( event.metaKey || event.ctrlKey ){
      window.open(href);
    } else {
      window.location = href;
    }
    return false;
  });
});

さらには、右クリックやスマホでの長押しによるコンテキストメニューにも対応させる必要があるのですが、そもそも本来のリンク要素外の範囲では「新しいタブで開く」などのメニューが表示されません。

そこまで拘って小細工するくらいなら、素直に HTLM5 の記述で複数のブロック要素を a 要素で囲む方がシンプルで、ユーザビリティが高いのかもしれませんね。