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; } } }); } };
たぶんこんなので動くはず。