onclickと本気とIE

Think IT 第1回:そろそろ本気で学びませんか?

本気でやるならonclick属性は避けてライブラリを活用すべき – id:HolyGrailとid:HoryGrailの区別がつかない日記

onclick 属性問題について – IT戦記

個人的には、onclick属性を書くのってCSSでいうと<span style="color:red;text-decoration:underline;">こんにちはこんばんは</span>みたいなもんだと思うので、長所短所もそれに準じる感じ。ただ、ちょっとしたハック(やっつけ仕事)としてやることはあるけど、本気と言うなら外に書くべきだよなあ、とは思う。

ライブラリは流行り廃りが激しいから、特定のライブラリに依存した「おまじない」ばかり覚えているのはどうかと思うなあ

やっぱり、 DOM を直接書けたほうが、知識としては幅広く使えると思いますよ。

それはそうなんだけど、最初からIE向けおまじないを意識しなきゃいけないのは茨の道だと思う。僕はOperaのUser JavaScriptから入ったのでIEが出てきたのは中盤になってからだけど、レベル1の状態でIEが出てきたら即死続出じゃないだろうか。

form=document.getElementsById("targetForm");

// 普通のブラウザ向け
form.addEventListener("submit",function(e){
    alert("submitさせないっ");
    e.preventDefault();
},false);

// IE向け
form.attachEvent("onsubmit",function(){
    alert("submitさせないっ");
    window.event.returnValue=false;
});

// クロスブラウザ手抜きver
(function(form){
var _tmp=form.onsubmit || function(){};
form.onsubmit=function(){
    _tmp.apply(this,arguments);
    alert("submitさせないっ");
    return false;
}
})(form)

メソッドから引数からイベントの扱いから、alert以外すべて非互換なんてこんな書き分けは嫌がらせとしか思えない。手抜きverも、挙動を理解してないとたぶん厳しいし毎回こんなの書くのも嫌だ。

IEを無視するためにライブラリから入る、ってのは悪くないと思うなあ。運動のために階段を使う人が居てもいいけど、エレベータも捨てたもんじゃないですよ。

どっちみち何かつくるなら、まずやることは各ブラウザの違いを吸収するラッパー作りになるので、プロダクション環境では既存ライブラリか自作ラッパーかの違いでしかないと思うけど、それはまた別の話か。

おまけ

なぜか誰も正面切って反対してなかったので書いておくけど、<a href="javascript:void(0);" onclick="somefunc();">あいうえお</a>とかやられると、このリンクは新規タブで開いていいのか普通に左クリックしなきゃいけないのか、と毎回判断しなきゃいけないのでやめてください。

<span class="clickable" onclick="somefunc();">あいうえお</span>とかCSSでそれっぽく見せるようにしてください。

javascript
  • nanto_vi2008-05-17 23:46:13

    普段リンクをどのように判別していますか?
    私は、下線が引かれ、周囲と文字色が異なり、カーソルが手の形に変化する部分を「リンク」として認識します。
    逆に言えば、span要素を使っていても、CSSで下線を引かれ、文字色を変えられ、カーソルを手の形にされた部分は「リンク」として認識してしまいます。
    つまり、新規タブで開いていいのか(私の場合はミドルクリックしていいのか)、左クリックしなくてはいけないのかという判断は、a要素を使うかspan要素を使うかには関係ありません。
    このような事例に関してはどうお考えでしょうか。

  • tt252008-05-18 00:18:39

    *1点目

    span.clickableが常にハイパーリンクを模しているとは限りません。ボタンに見せかけているケースもありますし、Google Webmaster Toolではselect要素を模したスタイルを適用していました。

    これらをホイールクリックしようとは思いません。


    *2点目

    aとspanで決定的に違うのは、ホイールクリックしてもspanの場合は何も起こらない(空のタブが開かない)ことです。

    僕の場合は「バックグラウンドで新規タブを開く」設定にしているので、間違ってvoid(0);を開いたら空のタブに移動して閉じる(または空のタブをホイールクリックで閉じる)という作業が発生します。

    a要素でなければこの後始末をしなくていいので、間違ってホイールクリックしてもさほど困ることはありません。


    しかし、たしかに本文の書き方はちょっとまずかったですね。あとで補足しておきます。

  • twk2008-05-18 12:00:02

    http://nonn-et-twk.net/twk/js-event-handler
    イベントハンドラ設定の件について、ハイパーリンクを模すか、aタグを使うか、についての件含めてエントリーを書きました。

    ボタンっぽい見栄えはデザイン上の選択、aタグを使うのは作成者側の工数削減と思います。

    どちらも、失うものは上級?ユーザーの満足度なので限定的と言う考えかと思います。

    デフォルトのボタンとは違って格好よくて、中クリックしたくならないようなボタンデザインのパターンが増えていけば、それがユニバーサルデザインになるのかなと思います。

  • tt252008-05-18 20:08:32

    >どちらも、失うものは上級?ユーザーの満足度なので限定的と言う考えかと思います。

    IE6全盛の今はそうですが、IE7にはタブもついたことですし、近いうちにこの状況が変わる可能性は高いんじゃないかと思っています。まあ、未来の話をしても詮ないですが。

    もしそうなっても、ならずとも、デザイン/ノウハウの蓄積がものを言うのは間違いないですね。



    ちょっと自分で初心を忘れそうになってきてるのでメモ。

    大元のサンプルで、「JavaScriptとは」というまったく同じアンカーテキストで片やvoid(0)、片や普通のリンクという使い方をしてたのを見て「これはないだろ」と思ったのが発端です。

    http://ajax.studynet.jp/samples/thinkit/index1.html

  • miya20002008-05-21 22:02:16

    なぜ最初にspan要素が出てくるのですか?
    クリッカブルであるならまさにそれを表現するためのbutton要素やinput要素があるわけです。それを差し置いてspan要素にstyleを設定して「それっぽく見せるようにしてください」との主張は意味がわかりません。

  • tt252008-05-22 00:43:09

    あーいや本文執筆時は深く考えてspanと書いたわけではなくて、ぱっと思いついたのがspanだっただけです。それを起点に議論が続いてるので、改めて俯瞰するとちぐはぐな印象になってしまってるんだと思います。一度仕切り直すべきでしたね。

3+5=
名前