しるてく

技術的な話をします

aタグを子に持つdivとかをリンカブルにしたい

スマートフォンでリンクがクリックしづらい問題がある。

<div><a href="#">hoge</a></div>

とかなら

a { display: block; }

と書くだけでお気軽にクリック領域を広げられるのですが、

<div>ほげほげー。詳しくは<a href="#">こちら</a>でみてね。ほげほげー</div>

みたいなのだと上のやり方は通用しないので、divをクリックしたらいい感じにページ遷移してくれる君を作る必要がある。

jQueryを使う場合

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

jQueryを使わない場合

var linkableTag = function() {
  var elm = document.getElementsByClassName('linkable');
  for(var i = 0, l = elm.length; i < l; i++) {
    EkiDashColopl.addEventListener('click', function() {
      var children = this.childNodes;
      for (var j = 0, l = children.length; j < l; j++) {
        if ( children[j].tagName == 'A' ) {
          window.location = children[j].href;
          return false;
        }
      }
    });
  }
};

たぶんこんなので動くはず。