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

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

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

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

Q&A

解決済

1回答

4580閲覧

JavaScriptでaddEventListenerで登録したイベントをremoveEventListenerで削除したいがうまくいかない

okame

総合スコア54

JavaScript

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

0グッド

0クリップ

投稿2017/09/15 08:38

img要素の画像がa要素をクリックすると切り替わるという処理をJavaScriptで書きました。
そこに追加して、button要素がクリックされたらa要素のクリックが無効になるようにしたいのですが、
どうもうまくいきません。

addEventListenerとremoveEventListenerの第二引数をうまいこと揃えてやらないかんことはわかっているのですが、
無名関数を別で関数に切り出すとeventが設定できなくなったりします。

どうすればよいでしょうか?

html

1<button>取り消し</button> 2<ul> 3 <li><a href="./image/flower.jpg"></a></li> 4 <li><a href="./image/sea.jpg"></a></li> 5 <li><a href="./image/jellyfish.jpg">くらげ</a></li> 6 <li><a href="./image/building.jpg">建物</a></li> 7</ul> 8<p><img src="./image/flower.jpg" alt=""></p>

js

1(function() { 2 // ... 3 document.querySelectorAll('a').forEach(function(value) { 4 value.addEventListener('click', function(event) { 5 event.preventDefault(); 6 7 var img = document.querySelector('img'); 8 img.src = this.getAttribute('href'); 9 img.alt = this.textContent; 10 }, false); 11 }); 12 13 document.querySelector('button').removeEventListener('click', function() { 14 // いろいろ試したのですがうまくいかず... 15 }, false); 16 17})();

ご教示いただければ幸いです。

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

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

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

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

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

guest

回答1

0

ベストアンサー

addEventListener に渡している関数ポインタをremoveEventListener に渡す必要があるわけですから

(function() { // ... var funcList = [] document.querySelectorAll('a').forEach(function(el) { var clickFunc = function(event) { event.preventDefault(); var img = document.querySelector('img'); img.src = this.getAttribute('href'); img.alt = this.textContent; }; el.addEventListener('click', clickFunc, false); funcList.push({ clickFunc:clickFunc, el:el }) }); document.querySelector('button').onclick = function () { funcList.forEach(function(pair){ pair.el.removeEventListener('click',pair.clickFunc,false); }); } })();

で動作するようです

投稿2017/09/15 10:28

編集2017/09/16 00:39
m0a

総合スコア708

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

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

okame

2017/09/15 12:00

回答ありがとうございます! ...ざっと動作確認したのですが、うまくいかないみたいです。
m0a

2017/09/16 00:43

基本的に言いたいことは同じなんですがコードをjsbinで検証して書き直しました。 http://jsbin.com/jugiroxeje/edit?html,js,output にコードを置いています。 質問するときには検証環境も提供すると回答をもらいやすくなると思います
okame

2017/09/16 03:48 編集

再度ご提示いただいたコードで動作を検証し、正常に動作することを確認しました!! 度々ありがとうございましたm(_ _)m ※今後は検証環境を用意するように気をつけます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問