WEBサービスを作っている時に、色々なトリッキーな方法を使う事はよくあります。
入力フォームを設置しているのに、データ送信を行わないとか、spanタグを記述しているのに、display:block;というプロパティを設置したり、もはや、WEBページのHTMLはかなりなカオスになってきている状態ですね。
でも、そんな事は当たり前なのでしょう。全く気にしません。だって、input type="submit"ボタンを設置せずに、別のエレメントでsubmitを行うことなどしょっちゅうですからね。
なぜなら、その方が都合がいいからです。HTMLに正確に準拠していては、いいサイトは作れません。※もちろん、違反系はダメですが・・・
今回は、Aタグを設置しているのに、ページリンクさせない。というなんとも矛盾した仕様で、ほんのちょっぴり普通と違う切り口で行なったので、参考になる人は読んでやってください。
やりたい事
ページ内に画像サムネイルがたくさんある状態（pinterestみたいな画面を想像してください。
※イメージはサンプルです。
こうした画像にはそれぞれAタグで囲まれているんですが、この画像一覧は、随時SocketIO通信で、リアルタイムに追加・削除・変更されていきます。
そうした時に、画像をクリックした際に、
Lightboxのように、サムネイルから、拡大画像を表示させて、その中でさらにリンク先へ遷移したり、この画像を削除したり、または「イイネ」ボタンを設置したりするようにしたいために、Aタグをクリックした時は、ページ遷移して欲しくないのです。
いくつかの方法論
Aタグを設置している時に、ページ遷移させない方法はいくつかあります。
1. void(0)
Aタグの記述で下記のようにする事で、Aタグはリンクの機能を失います。
<a href="javascript:void(0)">
この方法では、リンク先を別途設定しなくてはいけないため、あまりスマートではないですね。
できれば、Aタグをそのままにして、外付けルーツ的に、リンクをハッキングして、情報は保持しておく事が望ましいです。
2. return false;
次にできるやり方としては、onclickイベントに"return false;"を返してあげる事で、Aタグのページ遷移機能を停止する事ができます。
<a href="http://hoge.com/" onclick="return false;">Web-Page</a>
# または
<a href="http://hoge.com/" id="link">Web-Page</a>
<script>
document.getElementById("ink").onclick = function(){
console.log("link-click : "+this.href);
return false;
};
</script>
この手法で、リンク遷移回避はできるのですが、addEventListenerを使ってAタグ自体に別のclickイベントが施されている場合、それらを上書きしてしまうため、システムコンフリクトに遭遇してしまう可能性もあります。
単一サイトで、今後システム的に、イベント追加を行わないのであれば、それでもいいかもしれませんが、マーケティングツールなどを導入して計測すると、おかしな結果になる可能性も想像できますね。
3. wondow onclickで対応
これまでの簡易な手段を元に、今現状の仕様を殺さずに、柔軟な書き方ができるように、且つ、サイトにあまり手を加えないようにする手段として、windowのclickイベントに追加をして、画面内のクリックで、対象のimgタグをクリックして、その上位のAタグをページ遷移停止する方法は以下の通りです。
<a href="http://hoge.com/">
<img src="hoge.jpg">
</a>
<script>
window.addeventListener("clock",function(e){
if(e.target.tagName === "IMG"
&& e.target.parentNode.tagName === "A"
){
e.target.parentNode.setAttribute("data-href" , e.target.parentNode.href);
e.target.parentNode.href= "javascript:void(0)";
}
});
</script>
こうする事で、IMGタグをクリックした時に上位にあるAタグのhref属性を保持しつつ、ページ遷移を停止する事が可能になります。
実際にこの方法で、ページ遷移しちゃうかな〜と思ってたんですが、やったらできたという程度の認識で、GoogleChromeで確認してますが、他のブラウザではうまく動作しないかもしれません。
素敵な有志の方で別ブラウザでの挙動を確認された人がいましたら、コメントにてご報告くださいませ。
そして、これを利用したLightBoxのようなツールでもう少し軽量版を後日公開する予定ですので、ご期待くださいませ。
0 件のコメント:
コメントを投稿