title: Removing event listener that invokes an event listener
body: <p>Note: there are a lot of questions related to removing event listeners.
  In the simple case they are solved by moving the anonymous JS function to a named one and then calling the function <code>removeEventListener</code> with the specified name.</p>
  
  <p>e.g.</p>
  
  <pre><code>element.addEventListener("click", function(event){console.log("you clicked me");)})
  </code></pre>
  
  <p>goes to</p>
  
  <pre><code>function youClickedMe(event) {console.log("you clicked me");}
  element.addEventListener("click", youClickedMe)
  </code></pre>
  
  <p>and then elsewhere</p>
  
  <pre><code>element.removeEventListener("click", youClickedMe)
  </code></pre>
  
  <hr>
  
  <p>In my case, it is a bit more complex.</p>
  
  <ol>
  <li>I have a closed variable that I need to pass along</li>
  <li>my event binds new event listeners</li>
  </ol>
  
  <p>I am tying to create capture what the user does when the left mouse button (LMB) is clicked and the mouse moves over a certain area after the DOM has entered a certain mode (a button is pressed, toggling a boolean)</p>
  
  <p>So far it works pretty ok, see fiddle:</p>
  
  <p><a href="https://jsfiddle.net/SumNeuron/o1yu8oyt/" rel="nofollow noreferrer">https://jsfiddle.net/SumNeuron/o1yu8oyt/</a></p>
  
  <p>but the event "mousemove" will not go away no matter what I try.</p>
  
  <p>Further, when I add a <code>d3.zoom</code> / <code>d3.pan</code> function to the mix, things get even worse... but that is a separate question.</p>
  
  <p>Any ideas on how to remove this / these added event(s)?</p>