jmblog.jp » javascript

preventDefault() と stopPropagation()

Yoshihide — Thu, 24 May 2007 16:11:09 +0000

先日公開した「投稿スラッグ（Post slug）が空白なら警告してくれるWordPress用Greasemonkeyスクリプト」を開発しているときに、JavaScriptでのイベントのキャンセルまわりで見事にハマってしまいました。そのときに調べてわかったことをまとめてみようと思います。（間違いがあれば是非ご指摘ください！）

やりたかったこと

WordPressの投稿画面で「公開（Publish）」ボタンをクリックしたときに、「投稿スラッグ（Post slug）」のテキストボックスに値が入っていなければ、確認ダイアログを出す。そこで「キャンセル」ボタンが押されたら、フォームの submit を中止する。

最初に思いついた方法

まず頭に浮かんだのは、submit ボタンに対して HTML でイベントハンドラを記述するという、とても古典的な方法でした。

<input name="publish" type="submit" id="publish" tabindex="5" accesskey="p" value="公開" onClick="return CheckPostSlug();" />
<script type="text/javascript">
function CheckPostSlug() {
if (document.forms[0].post_name.value == '') {
return confirm("WARNING!\n\n" + "Post slug is blank. Are you OK?\n");
}
}
</script>

しかし、今回開発するのは Greasemonkey スクリプトです。直接 HTML を書き換えるわけにはいきません。DOM 操作で無理やりできないことはないかも知れませんが、あまりにもダサい。もっとスマートな方法を探ってみました。

submit がキャンセルできない・・・

まずは、

addEventListener()

メソッドを使って次のように書いてみました。

$('publish').addEventListener('click', function() {
if ($('post_name').value == '') {
if(!confirm(msg)){
// eventをキャンセル（してるつもり）
return false;
}
}
}, true);
function $(id){
return document.getElementById(id);
}

しかし、この方法ではうまくいきませんでした。（何度テスト用のエントリを投稿したことか・・・）いろいろ試してみたところ、clickイベントはキャンセルできているのですが、フォームのsubmitイベントがキャンセルできていないようです。では、submit 時のイベントをなくしてしまえということで、

$('publish').addEventListener('click', function() {
if ($('post_name').value == '') {
if(!confirm(msg)){
// submit を無効に（してるつもり）
$('post').onsubmit = function() { return false; }
}
}
}, true);

としたかったのですが、これは Greasemonkey のセキュリティ的な制限でできません。むむ・・・

Event.stopPropagation() ?

行き詰って Greasemonkey Hacks に載っているサンプルをあれこれ眺めていると、

Event.stopPropagation()

というメソッドを見つけました。Google で調べてみたところ、

stopPropagation メソッドは、イベントフローにおいてこれ以上イベントが伝えられるのを止めるために使用します。

Event (共通 DOM API)

とあります。おぉ、これかぁと思ったのですが、これもダメ。むむむむ・・・

Event.preventDefault() !!

結局、

Event.preventDefault()

を使えばうまくいったのでした。

$('publish').addEventListener('click', function(e) {
if ($('post_name').value == '') {
if(!confirm(msg)){
// click も submit もキャンセルできた！
e.preventDefault();
}
}
}, true);

preventDefault()

について調べてみると、

preventDefault メソッドを使用するとイベントのキャンセルを通知できるため、そのイベントの結果として通常は実装により実行されるデフォルトのアクションが実行されません。

Event (共通 DOM API)

とあります。サブミットボタンの click イベントのあとには、フォームの submit イベントがデフォルトのアクションとして実装されているようなので、今回はこのメソッドが正解だったようです。

では、

stopPropagation()

は何だったのでしょう？これを理解するには、まずイベント伝播 (event propagation) という概念を理解する必要があります。

イベント伝播

私も完全に理解しているわけではないのですが、誤りを恐れずにざっくりと説明すると（JavaScript本を参考にしたのでたぶんあってるはず）、例えば、フォームのあるボタンをクリックしたとき、実は、

まず、最上位である Window オブジェクトの Click イベントが発生。
ここで例えば

window.onclick = function() { alert('window was clicked'); }

などと定義しているとアラートが表示される。
次に、その下位（例えばForm オブジェクト）の Click イベントが発生。
ここで例えば

document.forms[0].onclick = function() { alert('form was clicked'); }

などと定義しているとアラートが表示される。
最後に、クリックした Button オブジェクトの Click イベントが発生。

ということが起こっているのです。これが「イベント伝播」です。しかし、これは Firefox や Opera に限った話で、Internet Explorer の場合は、イベントの伝わり方が逆になります。つまり、

まず、クリックした Button オブジェクトの Click イベントが発生。
次に、その上位（例えばForm オブジェクト）の Click イベントが発生。
最後に、最上位である Window オブジェクトの Click イベントが発生。

となります。Firefox や Opera のように「上から下に」伝わっていくのを「イベントキャプチャリング方式」といい、IE のように「下から上に」伝わっていくのを「イベントバブリング方式」と言います。「バブリング」は「泡（バブル）」なので、下から上に伝わっていくと覚えればよいかと思います。IE なんて泡のように消えてし（ry

さきほどうまくいかなかった

stopPropagation()

は、このイベント伝播を途中で止めるときに利用するメソッドなのです。

[追記 2010-05-17]

はてブのコメントにて「addEventListenerの第3引数に false を指定すれば「イベントバブリング方式」で動作する」との情報をいただきましたので、追記しておきます。

IE でのイベントキャンセル

なお、IE は

Event.preventDefault()

と

Event.stopPropagation()

に対応していません。その代わりに、グローバル変数 event のプロパティである returnValue と cancelBubble を使います。

Firefox, Opera	Event.preventDefault();
IE	event.returnValue = false;

Firefox, Opera	Event.stopPropagation();
IE	event.cancelBubble = true;

まとめ

イベント伝播が理解できれば効率のよいコードを書くことができます。例えば、「プルダウンリストの中をマウスホイールで知らずに変えちゃうことがあるので、すべてのプルダウンリストでマウスホイールが効かないようにしてほしい」という要望がユーザーからあったとします。（実際あったんですが。）この場合、すべての select 要素にイベントハンドラを定義していくとえらい大変ですが、

というふうに、上位の document オブジェクトで、伝播されてくるすべてのイベントを監視して、イベントの発生元が select 要素だったらキャンセルする、と書くことができるのです。ね、便利でしょ？

イベントまわりは、ブラウザごとに仕様が異なるせいもあり、よくわかっていないとはまりますが、使いこなせるようになれば、かなり強力な武器になり得ると思うので、しっかり見につけたいと思います。

TinyURLのリンク先を取得するAPI

Yoshihide — Sun, 29 Apr 2007 14:08:08 +0000

Twitter 用に TinyURL のリダイレクト先URLを取得する Greasemonkey スクリプトを作ったんですが、すでに同じものを作っておられる方がいたので、公開はこっそりと行うこととして、このエントリでは、このGreasemonkey スクリプトを作るときに見つけた、TinyURL のリンク先を取得する API をご紹介。

» TinyURL Callback API

使い方はカンタン。

http://remysharp.com/tinyurlapi?callback=CallbackFunc&url=http://tinyurl.com/2acavb

というふうに、コールバック関数名とTinyURLを渡すだけ。すると、

CallbackFunc("http://jmblog.jp/download/tinyurl_restorer.user.js");

というふうにリンク先のURLがコールバック関数と共に返ってくるので、

var orginal_url;
function CallbackFunc(url) {
original_url = url;
}

という感じに、事前に定義しておいたコールバック関数で受け取ればOK。

しかし、どうしてこの手の API を TinyURL.com が公開していないのか不思議です・・・ニーズはいっぱいあるのにね。

Lightbox JS v2.0 shortcut keys add-on

Yoshihide — Sat, 10 Feb 2007 16:42:44 +0000

[追記 2007-04-12]

Lightbox 2 が v2.03 にバージョンアップして、キーボードショートカットの機能が改善されました。右カーソル、左カーソルでの移動が可能になり、Escキーで閉じることができるようになっています。ということで、このスクリプトは無用の長物と相成りました・・・

Lightbox JS v2.0 という画像をかっこよく表示させる有名なスクリプトがあります。複数の画像を「Image Set」として用意するとスライドショーが作成され、キーボードで前後に移動することができるのですが、nキーとpキーでしか移動できないので、あまり感覚的ではありません。そこで、カーソルキーでも移動できるようにしてユーザビリティを向上させるスクリプトを作成してみました。

Lightbox JS v2.0 shortcut keys add-on

»sample

使い方はカンタン。Lightbox JS v2.0 のスクリプトのあとに読み込むだけです。

<script type="text/javascript" src="js/prototype.js"></script>

<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>

<script type="text/javascript" src="js/lightbox.js"></script>

<script type="text/javascript" src="js/lightbox_shortcut_keys_addon.js"></script>

これで、以下のショートカットキーが使えるようになります。

次の画像へ nキー、→（右カーソル）、↓（下カーソル）
前の画像へ pキー、←（左カーソル）、↑（上カーソル）
閉じる xキー、oキー、cキー、Escキー

ちなみに開発のきっかけは、playback.js です。これを使ったプレゼンテーション資料がカーソルキーで移動できてすごく便利だったので作ってみました。

なお、不具合などあれば、お手数ですがご報告ください。よろしくお願いします。

角丸にチャレンジ – JavaScript番外編

Yoshihide — Mon, 21 Aug 2006 13:15:13 +0000

Amazon から「インスタントストア」というサービスがはじまりました。Amazon のアソシエイトIDがあれば、独自のオンラインストアを簡単に作成できてしまうという代物です。

で、本題は「インスタントストア」ではなくここで使われている角丸です。HTMLコードを見るとあの Nifty Corners ではありませんか！これは実績十分ですねー。

というわけで、私のインスタントストアです。（いや、これが本題ではなく。）

» jmblog.jp おすすめの9冊

角丸にチャレンジ – JavaScript編

Yoshihide — Fri, 18 Aug 2006 16:52:27 +0000

今回は、画像を使わずに JavaScript だけで角丸を実現させる方法を紹介します。

角丸を表示するための JavaScript ライブラリは数多く存在します。その中からいくつかピックアップしてみました。

» Nifty Corners Cube

有名な Nifty Corners の最新バージョンです。恐らく、これが角丸用ライブラリの元祖じゃないでしょうか。初めて見たときは、「こんなことが画像なしでできてしまうのかー！」とびっくりしました。まだご存じない方も、サンプルを見ればきっと驚くはず。使い方もすごくシンプルです。どういう仕組みになっているかは、最初のバージョンのページに詳しく解説があります。

» curvyCorners

アンチエイリアスが売りのライブラリ。背景に画像があってもきれいに見えます。（デモ）

» Mochikit

Ajax なエフェクトや UI を実現させるための JavaScript ライブラリとして有名な Mochikit ですが、角丸にも対応しています。実装方法もかなり洗練されている感じ。JavaScript に通じた人ならこれが一番使いやすいかもしれないですね。（デモ）

» Rico

Mochikit と同様、こちらも有名な JavaScript ライブラリです。角丸のみ使う場合は、Encytemedia: Rico rounded corners without all of Rico で公開されているスクリプトを使うとよいでしょう。

» Spiffy Corners

こちらは JavaScript のライブラリではなく、角丸のジェネレーターです。クラス名、背景色、前景色を指定すれば、CSS と HTML を生成してくれます。（やってることは他とほぼ同じ。）JavaScript が苦手な人はこれが一番お手軽かも。

まだまだたくさんありますので、気になる方は、
del.icio.us/tag/rounded+corners+javascript あたりで探してみてはいかがでしょうか？