【JavaScript】 onclick属性とイベント

うちの会社はちょっとまぁ、 古きを重んじる会社な訳でして。

<a href="hoge.html" onclick="window.open'('hoge.html', 'myWin', 'width=300, height=500');">クリック</a>

みたいなのがあったのですが。

ソースが見づらくなるのでとっても嫌なのです。

jQueryとか使えば一発ですし、そうじゃなくてもclassとかつけてちょこちょこやれば済む話なんですが、 それはなんか違うな、と。

というわけでせめて、

<a href="hoge.html" onclick="hoge();">クリック</a>

という形でなんとかお願いできませんか、と。

そういうわけで早速、

短絡的思考を元に

var hoge = function(){
window.open(this.href, 'myWin', 'width=300, height=500')
}

結果：動かず

まぁそりゃそうですね。 この時点で this の指すものは変わってしまってる訳ですから。

思いつきで

var hoge = function(event){
if(!event) event = window.event;
event.preventDefault();
var href = (event.target) ? event.target.parentNode.href : event.srcElement.parentNode.href;
window.open(href, 'mywindow', 'width=300, height=500);
}

結果：動かず

実はこれ、少し前にやろうとしてたのを思い出して 改めてやったやつなんですが。 なぜいきなり引数に event を入れたのか。 よく覚えていないのです 。 多分

$('#hoge').click(function(e){});

的なノリでやりたかったんだと思います。

arguments.callee.caller を使って

var hoge = function(){
var e = arguments.callee.caller.arguments[0] || window.event; e.preventDefault();
var href = e.target || e.srcElement;
alert(href);
window.open(href, 'mywindow', 'width=587, height= 800, menubar=no, toolbar=no, scrollbars=yes');

結果：IE以外では動いた

おぉ。。やっと進みました。 とりあえず呼び出し元が onclick属性に関係する何かしらなのではないかということで、 caller を使って呼び出し元を探してみたところビンゴ。 引数に event を持った関数が返ってきました。 なので、その関数の第一引数、つまり event を取得することで目標達成。

しかしIEでは動かず･･･。 詳しく見る前に時間が来てしまったのであれですが、 そもそも event の取得の時点でおかしい模様。 明日以降また時間ができた時にでも調べてみることにします。

今日はここまで。

ところで、 callee ってなんて読むんでしょう。 こーるいーいー？ こーりー？ どうでもいいですか、そうですか。

追記：14:10 2009/10/09 タイトルちょっと変えました。

var hoge = function(){
var event = (window.event) ? window.event : arguments.callee.caller.arguments[0];
var self = event.target || event.srcElement;
alert(self.nodeName); // A
window.open(self.href, 'myWin', 'width=300, height=500);
};

IE6, IE7, Opera で動作確認とのこと ■

でもIE8では window.open のあたりがうまくいってないのか _self に表示されちゃってます。 なんでだろう。。