2008年04月02日

イベントのキャンセルの件

こんな時、

<pre onclick="alert('hoe');" style="background-color:blue;">
hoe
<pre onclick="alert('hoehoe');" style="background-color:yellow;">hoehoe</pre>
</pre>

hoehoeをクリックすると、

hoehoe
hoe

と、両方のイベントハンドラが動いてしまうので、
hoehoeのイベントハンドラを実行した後に、イベントの伝播をキャンセルしたいです。
event.stopPropagation()

を使えばいい事がわかったのですが、このeventはどこに?

eventオブジェクトはデフォルトでイベントハンドラにパラメータで渡されるそうです。

function hoe(evt) {
alert(evt);
}
<a onclick="hoe();">hoe</a>

で、hoeを呼び出す時に呼び出し側でeventオブジェクトを明示的に引数として渡す必要がないという事です。

じゃあ、こんな時は?

function func(str) {
alert(str);
}
<a onclick="func('hoe');">hoe</a>

関数funcにパラメータを渡したいのですが、デフォルトで渡されるeventオブジェクトはどこに?
こうするそうです。

function func(evt, str) {
alert(str);
}
<a onclick="func(event, 'hoe');">hoe</a>

呼び出し側で指定している引数eventは「eventという名前の定義済みの引数」だそうです。

func('hoe', event)

って順番間違えれば当然eventオブジェクトがalert()で表示されます。

IEではevent.stopPropagation()がないので、
evt.cancelBubble = true;

を使えばよいそうです。

結果、こんな感じに。

function func(evt, str) {
alert(str);

if (evt.stopPropagation) {
evt.stopPropagation();
} else {
evt.cancelBubble = true;
}
}

<pre onclick="func(event, 'hoe');" style="background-color:blue;">
hoe
<pre onclick="func(event, 'hoehoe');" style="background-color:yellow;">hoehoe</pre>
</pre>


はいー(世界のナベアツ風に)。
posted by ほえ at 12:09| Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:


この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。