Web Artisan Blog - ウェブ アルチザン ブログ

【仕様】
アンカーがクリックされた時に、そのアンカータグのhref属性を、
Research Artisanクリック測定用URIに書き換え、
書き換えたURI側でデータ登録し、書きかえる以前のURIにリダイレクトさせる。

【書き換える部分のJavaScriptサンプル】

//onclickイベント
document.onclick = function(e) {
 //IE,Opera
 if (document.all) {
  //imgタグの場合のhref取得
  if (window.event.srcElement.tagName.toLowerCase() == 'img') {
   uri = window.event.srcElement.parentElement.href;
   window.event.srcElement.parentElement.href = クリック測定用URI?書き換える前URI=uri;
  //aタグの場合のhref取得
  }
  if (window.event.srcElement.tagName.toLowerCase() == 'a') {
   uri = window.event.srcElement.href;
   window.event.srcElement.href = クリック測定用URI?書き換える前URI=uri;
  }
 }
 //Firefox,NetScape
 else if (document.getElementById) {
  if (e.target.href != '') {
   uri = e.target.href;
   e.target.href = クリック測定用URI?書き換える前URI=uri;
  }
  if (e.target.parentNode.href != '') {
   uri = e.target.parentNode.href;
   e.target.parentNode.href = クリック測定用URI?書き換える前URI=uri;
  }
 }
 return true;
}

やり方的にどうか？という疑問も持ちつつ、
思うように動作してくれて喜んでいたのですが、
たま〜に、IEで外部リンクをクリックすると、
一瞬、その外部リンクのリンクテキストに、
クリック測定用URIが表示されて、リンク先に遷移するという現象が起きてました。
測定自体は正常に行われるのですが、
一瞬表示が変わるので、クリックした人間は「何？」って思うでしょう。

（例）
<a href="http://www.google.co.jp">Google</a>
を、上記スクリプトで
<a href="クリック測定用URI?書き換える前のURI=http://www.google.co.jp">Google</a>
としたいのに、
<a href="クリック測定用URI?書き換える前のURI=http://www.google.co.jp">クリック測定用URI?書き換える前のURI=http://www.google.co.jp</a>
となってしまう現象でした。


で、途方に暮れていたら、
同じような現象に遭われていたようです。

アカラボ:javascript: link.href を変更するとリンクテキストが壊れます
javascript で ドキュメント内にある link (aタグ) の href を書き換えようと思っていろいろやっていたときに不思議な挙動(不具合?)を見つけたのでメモ。

FireFoxなんかで発生しないなど、全く同じですね。
「＠」マーク混じりかは詰めきれていませんが、
確かに、半角英数字記号入りのリンクテキストで見事に壊れてました。

ということで、もしlink.hrefをセットするスクリプトを実行しているなら、直後にlink.innerTextやlink.innerHTMLの再設定もお忘れなく。というか、忘れないように＜自分。

私も忘れないようにしておこ。

まあ、IEのバグでしょう。
ってか、こんな事する人、あんまいないか。

とにかく、こっちのロジックミスではない？ようで、
ホッとしたのでありました。