質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Q&A

解決済

1回答

1449閲覧

changeイベントでのremoveEventListenerが効かない

退会済みユーザー

退会済みユーザー

総合スコア0

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

0グッド

0クリップ

投稿2021/04/26 07:25

編集2021/04/26 07:30

前提・実現したいこと

javascriptを使用してWebサイトを制作しようとしています。
初心者の質問で恐れ入りますが、お知恵を拝借できれば幸いです。

レスポンシブデザインのテストとして、
『1026px以上』の時にクリックイベント定義、
『1025px以下』の時に同じクリックイベントを削除する
という挙動にしたいのですが、
現在removeEventListenerが効いていない状況です。

そのため、ウィンドウサイズを変更しブレークポイントを跨ぐたび
『1026px以上』の時のclickイベント(コンソールで『ヘッダークリック!
!』と表示)が追加され、一度のクリックで2回、3回と処理が行われてしまっています。

removeEventListenerを有効にするにはどのように記述するべきでしょうか。

該当のソースコード

javascript

1 2// machMedia定義 3let mql = window.matchMedia('screen and (max-width: 1025px)'); 4 5// ブレークポイントで行う処理 6let checkBreakPoint = function(mql) { 7 8 let header = document.getElementById('header'); 9 10 //クリック時に行う処理 11 let clickHeader = function(){ 12 console.log('ヘッダークリック!'); 13 } 14 15 //1026px以上の時にaddEventListener 16 if(!mql.matches) { 17 header.addEventListener('click', clickHeader, { passive: false }); 18 19 //1025px以下の時にremoveEventListener 20 } else { 21 header.removeEventListener('click', clickHeader, { passive: false }); 22 } 23} 24 25//実行 26mql.addEventListener('change', (e) => { 27 e.stopPropagation(); 28 checkBreakPoint(mql); 29});

試したこと

・実行部分のchangeイベントをresizeイベントに変更

  →setTimeoutでイベント発火のタイミング調整をしても、removeEventListener自体は効かないまま

・1026px以上の時の処理(header.addEvent....)の記述が終わった直後に
setTimeoutで5秒後にremoveEventListenerの記述をした

→5秒後にイベントは削除され、ブレークポイントを跨ぎウィンドウサイズが1025px以下になった時もクリックイベントは削除されたままだった

色々な方のremoveEventListenerに関するご質問を検索していましたが
恥ずかしながら解決策が見つかりませんでした。

大変恐れ入りますが、どうぞよろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

removeEventListenerには、addEventListenerで指定したのと同じ関数オブジェクトを渡す必要があります。

このコードではcheckBreakPointが実行されるたびに新しい関数オブジェクトが作られるので、removeEventListenerは正しく動作しません。

let clickHeader = function(){/* 略 */};checkBreakPointの外に出せるのであれば、それが手っ取り早いです。

投稿2021/04/26 07:40

編集2021/04/26 07:40
maisumakun

総合スコア145123

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2021/04/27 01:01

お返事が遅くなり申し訳ありません ご解説・ご回答ありがとうございます! おっしゃる通り、引数として渡していた関数オブジェクトを をcheckBreakPointの外に出して実行したところ、 removeEventListenerがちゃんと効いていました。 大変勉強になりました。ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問