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

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})();

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

行動規範の内容に同意します

回答1件

ベストアンサー

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