aタグの親要素にクリッカブルにする

サンプル

使い方

サンプルの(x)html

<div id="sample1">
<p>aタグで囲まれた「<a href="http://www.tk1975.com/">ここ</a>」をクリックするだけでなく、ここを囲むpタグをクリックしても、<strong>ここ</strong>と同じリンク先へ遷移します。</p>
</div>
<div id="sample2">
<p>また、同じ要領で、aタグで囲まれた「<a href="http://www.tk1975.com/">ここ</a>」をクリックするだけでなく、ここを囲むpタグをクリックしても、ここと同じリンク先へ遷移します。<strong>ただし、リンク先を新規ウィンドウで開くようにします。</strong></p>
</div>

Javascript（tk1975_config.jsへの記述例）

function eventClickSample1(){
var area_id = "sample1";
var elem = "p";
var link_target = "_self";
tk1975_eventClick(area_id,elem,link_target);
}
prepareOnloadFunction(eventClickSample1);

function eventClickSample2(){
var area_id = "sample2";
var elem = "p";
var link_target = "_blank";
tk1975_eventClick(area_id,elem,link_target);
}
prepareOnloadFunction(eventClickSample2);

• ※area_idは、対象範囲（クリッカブル領域を広げたいリンクの集まり）のid名です。
  elemは、クリッカブル領域を広げたリンクを含む個々のタグ要素名です。
  link_targetは、リンク先を自ページ上に開くか新規ウィンドウで開くかを取り決めています。「_self」もしくは「0」とした場合は自ページ上に開き、「_target」もしくは「1」とした場合は新規ウィンドウで開きます。
• ※area_idを「var area_id = "";」にすると、対象範囲はbody内すべてになります。
• ※「URLと同じリンク先を装飾する」と合わせて使用すると、クリッカブル領域を広げるだけでなく、見栄えを装飾することができます。
• ※関数「prepareOnloadFunction」に関しては、「DOM Scriptingを利用する上で知っておくべきこと」を参照してください。

思考回路 〜 tk1975_eventClick(area_id,elem,link_target); の流れ〜

1. クリッカブル領域を広げたいタグの親要素を指定する
2. クリッカブル領域を広げたいタグを指定する
3. そのタグ内のリンク先を抽出
4. そのタグ内をクリックした場合、抽出したリンク先へ遷移する

解説 〜 tk1975_eventClick(area_id,elem,link_target); の詳細〜

Javascript（tk1975.js）

1. function tk1975_eventClick(area_id,elem,link_target){
2. if(!document.getElementById || !document.getElementsByTagName || elem == "") return false;レガシーブラウザの場合、またはelemの指定がない場合は処理を中止
3. 【3-6,7】area_idの指定がない場合はドキュメント内すべてを対象にするif(area_id == ''){
4. var area = document.getElementsByTagName("body")[0];
5. }else{
6. if(!document.getElementById(area_id)) return false;area_idがドキュメント内にない場合、処理を中止
7. var area = document.getElementById(area_id);
8. }
9. var elems = area.getElementsByTagName(elem);
10. for(var i=0; i<elems.length; i++){
11. if(elems[i].getElementsByTagName("a").length == 0) continue;aタグがない場合は、次のelems[i]を調査
12. 【12-22】elems[i]をクリックした時の処理elems[i].onclick = function(){
13. var elemLink = this.getElementsByTagName("a")[0];
14. var elemURL = elemLink.getAttribute("href");
15. 【15-17】link_targetが「_self」もしくは「0」の場合、リンク先を自ページに開くif(link_target == "_self" || link_target == 0){
16. location.href = elemURL;
17. }
18. 【18-21】link_targetが「_blank」もしくは「1」の場合、リンク先を新規ウィンドウで開くif(link_target == "_blank" || link_target == 1){
19. window.open(elemURL,'','');
20. return false;
21. }
22. }
23. }
24. }

コメント＆トラックバック

この記事に関するご意見・ご感想をお聞かせください

この記事へのトラックバック

http://search-result.org/mt-tb.cgi/4