スマホメニュー

イベントバブリングを気にせずマウスイベントを使える関数を作ってみた【Javascript】

Javascriptでプラグラムをしていると、誰もが一度は引っかかるで有ろうイベントバブリング。独自でスライドショーなどを作ると、イベントバブリングしても影響が無いようコーディングしたり、コードを修正したりしているはずです!
と言う事で、イベントバブリングを気にせずにマウスクリック/オーバー/アウトを使えるような関数を作ってみました。

マウスクリック/オーバー/アウトをしたのが自分かを調べる関数

メインの関数

この関数にイベントを渡すと、イベントが発生した要素が自分自身なら「true」を返してきます。逆にイベントが発生したのが自分では無かった場合は「false」を返します。
ですので、「true」が返って来た時だけにその後の処理が実行されるようにすることで、イベントバブリングの影響を受けなくします。

【注意※】
この関数は、イベントバブリングを止める関数ではありません。子要素から伝播されてきたイベントを無視する関数ですので、自身が起こしたイベントは親要素に伝達していきます。全てのマウスイベントにコノ関数を挟めば問題無いかと思います。

マウスイベントの書き方

この関数にイベントと自分自身を引数で渡すように記述します。
サンプルではイベントハンドラで直接書いてますが、イベントリスナーで書いても大丈夫です。下記にイベントリスナーの例も記載して置きます。

IE用に余分に記述しないといけないのが面倒ですよね。。。
イベントハンドラを1つの要素に複数指定する事が無い場合は、イベントハンドラで直接書いても良いような気がします^^;

関数の簡単な解説

クリックの場合

6行目でイベントが発生した要素を取得出来ます。そしてその取得要素が、引数で渡されて来た、自分自身と同じかどうかを比較します。
比較した結果、自分自身では無かったら「false」を返します。

マウスオーバー/アウトの場合

7行目でイベントが発生した要素を取得出来ます。そしてその要素から親要素へと登って行き、自分自身と同じものが出てきたら「false」を返します。

クリックの場合と同じ様に、イベントが発生した要素と自分自身が同じかを比較するだけだと、今回の肝のイベントバブリングに引っかかるのでこの方法となりました。

実際の動いているところのデモ

クリックの動作デモ

クリック回数

0

一番大きい大サイズの要素をクリックすると、「クリック回数」が1つずつ増えていきます。真ん中にある中サイズの・小サイズの要素をクリックしても回数が増えていかない事を確認してくだい。

オーバー/アウトの動作デモ

オーバー回数

0

アウト回数

0

大サイズの要素に、マウスオーバーすると「オーバー回数」が、マウスアウトすると「アウト回数」が増えていきます。中サイズ・小サイズの要素にマウスオーバー/アウトしても回数が増えていかない事を確認してくだい。

その他のイベントバブル対策 / Javascript

onmouseenter/onmouseleave を使う

オーバー回数

0

アウト回数

0

onmouseover/onmouseoutと似たような動きをしますが、違うのはイベントバブリングをしない事です。子要素からも伝播しないし、親要素へも伝播しません。昔のブラウザでは動かないものもあるらしいですが、最近の主要ブラウザでは動くみたいなので、こちらを使っても良さそうです。

stopPropagation()/preventDefault() を使う

マウス場所

 

event.stopPropagation();
自身のイベントを親へ伝播させないようにします。
サンプルでは、中サイズ部分にこれを記述してあるので、中サイズ部分にマウスオーバーしても、それが親の大サイズ部分に伝播しないので、【中】とだけ表示されます。
また、子要素からは伝播するので、小サイズ部分にマウスオーバーすると、【小】と言う文字と【中】と表示されていると思います。
event.preventDefault();
今回は確認することができませんが、例えばa要素にコレを指定してあげると、要素をクリックしてもリンクしないようにすることができます。

その他のイベントバブル対策 / jQuery

jQuery固有の方法もあります。

hover(over, out) を使う

基本的な動きは「onmouseenter/onmouseleave」を使っているのでサンプルは特に載せません。

return false を使う

preventDefault()/stopPropagation()」の2つを合わせたような動きをします。同じくサンプルは特にのせません。
jQueryを使わずJavascriptだけで動かす場合は、「return false」を記述してもそのまま親要素へ伝播していきます。

チラシの裏

今回の関数は、「イージングの動き見本(サンプル)【Javascript / jQuery】」を作る中で、赤い球をクリックした時の不具合を解消する為に作りました。。。が、私が知らないだけで、もっと簡単な関数とか有ったら教えてください^^;

コメントを残す

メールアドレスが公開されることはありません。

Advertising

最近の記事

アーカイブ

Advertising

Advertising

カレンダー

2017年11月
« 10月    
 1234
567891011
12131415161718
19202122232425
2627282930  

タグ

Social