お問い合わせはコチラから

Javascriptでクリックイベントが多重発生した時の原因

HTMLサイトをWordpress化するという話は結構ありますが、逆にWordpressサイトをHTML化するという話もあります。

WordPressのサイトをHTML化していたところ、HTMLやCSS、Javascriptも同じなのにハンバーガーメニューの挙動が一致しませんでした。

原因はしょうもない理由でしたが、原因がわかるまでに結構時間がかかったのでメモを残しておこうと思います。

なぜかドロワーメニューが開くと直ぐに閉じる

ハンバーガーメニューの3本線をクリックすることでドロワーでメニューが開くはずなのですが、クリックした瞬間に閉じてしまう。一瞬表示されて閉じてしまうので、クリックして開いた後に、次のクリックイベントが勝手に発生して閉じているような挙動でした。

デバッガーで追いかけてもなぜイベントが連続で発生するのか、理由が全くわかりませんでした。

イベントのお化けが発生する理由は、同じjavascriptを2回読み込んでいた

他人のWordpressサイトをHTML化していたのでなるべくそのまま使えば大丈夫と思ったのが間違いでした。

ドロワーメニューを制御しているjavascriptがヘッダーをbodyタグを閉じる直前の2回読み込まれていました。

ヘッダーの読み込みを削除したら、普通に動くようになりました。

WordPress側は、2回読み込んでいても期待動作しているのでなかなか気が付きませんでした。

なぜ、HTML化すると上手く動かないのか、Wordpressで使用しているjQueryの違いなのかなんなのか、今でも原因はわかりません。普通に考えてドロワーメニューを開閉するトグル動作をするイベントを待ち受ける処理が2個あって、同時に発火したら誤動作するのは当たり前です。

///////ハンバーガーメニュー

$(function(){
  $('.el_humburger').on('click',function(){
    spNavInout(); // トグル処理
  });
});

まとめ

CSSの場合は、読み込む順番はあれど複数回同じファイルを読んでも影響はありませんが、Javascriptの場合はイベント処理がありますので、不用意に同じファイルを読み込むとトラブルになりやすいです。そして、同じファイルを2回読み込んでいると気が付くまでは、デバッグするのがとても難しいので、もし 原因不明な不思議な動きで悩まされたときには、同じファイルを2回読み込んでいないかチェックしてみるといいかもしれません。

タイトルとURLをコピーしました