Personal tools
You are here: Home ブログ 井上 JavaScriptのイベント処理のtips
« December 2010 »
Su Mo Tu We Th Fr Sa
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
Recent entries
Apache2.4のリリース予定は来年(2011年)初め(あくまで予定) inoue 2010-12-23
Herokuの発音 inoue 2010-12-20
雑誌記事「ソフトウェア・テストPRESS Vol.9」の原稿公開 inoue 2010-12-18
IPA未踏のニュース inoue 2010-12-15
労基法とチキンゲーム inoue 2010-12-06
フロントエンドエンジニア inoue 2010-12-03
ASCII.technologies誌にMapReduceの記事を書きました inoue 2010-11-25
技術評論社パーフェクトシリーズ絶賛発売中 inoue 2010-11-24
雑誌連載「Emacsのトラノマキ」の原稿(part8)公開 inoue 2010-11-22
RESTの当惑 inoue 2010-11-22
「プログラマのためのUXチートシート」を作りました inoue 2010-11-19
「ビューティフルコード」を読みました inoue 2010-11-16
Categories
カテゴリなし
 
Document Actions

JavaScriptのイベント処理のtips

prototype.js前提ですが、JavaScriptでルートウィンドウ(*)のクリックイベントを拾う場合、次のように書きます。

document.observe('click', function() { 処理 });

(*) ブラウザで「ルートウィンドウ」という呼び名が適切とは思えませんが、まあ雰囲気は通じると思うので。DOMの用語を使うなら「文書ノード」と呼ぶべきかもしれません。

DOMのイベントは、イベントが発生したノードから文書ノード(ルートノード)に向かってイベントが伝播します(いわゆるバブリング)。正確には逆方向のキャプチャリングが先にありますが、v1.6以降のprototype.jsのobserveメソッドはaddEventListenerメソッド(https://developer.mozilla.org/en/DOM/element.addEventListener)の第3引数にfalseを渡しているのでキャプチャリングは無視できます。

特定のノードでクリックイベントを拾ってイベントリスナを書く場合、何も考慮せずに書くと、イベントの伝播が進んで、最後に文書ノードのイベントリスナが実行されてしまいます。多くの場合、特定ノードでクリックイベントを処理した場合、文書ノードのイベントリスナの処理は余計です。この場合、次のようにEvent.stopで伝播を止めるのが定石です。

a_node.observe('click', function(evt) { 処理...; Event.stop(evt); })

しかし、aタグのリンクをクリックする場合、イベント伝播を明示的に止められないので、文書ノードのイベントリスナが走ってしまいます。

こういう場合の対処を浜辺さんに聞いたところ、次のようなコードを教えてもらいました。

document.observe('click', function(evt) { if (/a/i.test(Event.element(evt).tagName)) return; 処理 });

これはトリッキーすぎると文句を言いましたが、別に普通、との答えでした。

JavaScriptは言語としてはそんなに嫌いではないのですが、こういうHTML絡みの微妙さが好きになれません。

The URL to Trackback this entry is:
http://dev.ariel-networks.com/Members/inoue/js-event/tbping

Re:JavaScriptのイベント処理のtips

Posted by os0x at 2009-01-15 01:10
こんにちは。
/a/i は /^a$/i にしないとspanとかにもマッチしちゃいますね。

そして、<a> <b> hoge </b> </a>こんなマークアップだとtargetがb要素になるのでDocumentのイベントが走ってしまいますね。。
これは上手い解決策も思いつきません(ベタにtargetのparentNodeをDocumentまで調べるしかないかも)。。

うーん、Documentのイベント周りは確かに微妙ですね。。

Re:JavaScriptのイベント処理のtips

Posted by inoue at 2009-01-16 00:13
イベントリスナで必ずイベント伝播を止める方針を徹底すれば、spanの件は無視できると思います。..のパターンは見なかったことにします。
Add comment

You can add a comment by filling out the form below. Plain text formatting.

(Required)
(Required)
(Required)
This helps us prevent automated spamming.
Captcha Image


Copyright(C) 2001 - 2006 Ariel Networks, Inc. All rights reserved.