jQueryで、特定要素「以外」の部分のクリックを判定するときに便利な、「skOuterClick」というプラグインがあります。
自分もログインフォームとか、クリックで開閉するタイプのナビゲーションを作る際に利用させてもらってますが、実はこれ、デモのとおりにやると一部のブラウザで上手く動作しないっぽいことが判明しました。
Firefoxでイベントをキャッチできない
例えば、これは今作ってるとあるサイトのナビゲーション部分のJS（の一部）なんですが、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$('#menu_wrap').find('.hasChild').children('a').click(function() { event.stopPropagation(); $('.menu_lv1 , .subMenu_wrap').css('height',''); $(this).parent('.root').toggleClass('open'); $(this).next('div').toggle() .find('ul li:first').addClass('activeParent').children('ul:first').addClass('activeList').show() .parent('li').siblings().removeClass('activeParent').children('ul').removeClass('activeList').hide(); $('.menu_lv1').data('originalh',$('.menu_lv1').height()); return false; }); $('#menu_wrap .subMenu_wrap').skOuterClick(function() { $(this).hide(); }); |
こんな感じで作ると、Chromeとかでは問題なく動作するんですが、Firefoxではエラーがでて動いてくれません。「event is not defined」みたいなこと言われちゃいます。
これに関してはまぁ、function の引数に event いれてあげたら動いてくれました。
|
1 2 3 |
$('#menu_wrap').find('.hasChild').children('a').click(function(event) { event.stopPropagation(); }); |
IEでなんか変なエラーがでる
Firefoxに関しては上記の対応だけでOKだったんですが、これだとまだIEでうまく動かず、左下に黄色の三角に！マークが出てしまいます。
で、その場合はどうするかというと、
|
1 2 |
event.preventDefault(); event.stopPropagation(); |
ッて感じで、 event.stopPropagation(); の前に event.preventDefault(); を入れるといいらしい。
つまり最終的には、
|
1 2 3 4 5 |
$('#menu_wrap').find('.hasChild').children('a').click(function(event) { event.preventDefault(); event.stopPropagation(); （中略） }); |
みたいにすれば大丈夫みたい。
IE8、IE10、IE11あたりはこれでいけました。他は確認できる環境がないのでわかんないですが、多分大丈夫…だと思います。
とりあえず過去に作ったサイトは修正してこないと。（今までは個人的なサイトでしか使ってなかったのが救いっちゃ救いか…）
コメントする