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

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回読み込んでいないかチェックしてみるといいかもしれません。

この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

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