title: How to get out of onmousemove event?
body: <p>I am dynamically creating a table, with a set number of rows and columns. Once you fire the <code>onmousedown</code> event, it will run a loop to find out which <code>&lt;td&gt;&lt;/td&gt;</code> you <em>pressed</em> and are <em>moving over</em>, and set it's background color to red. </p>
  
  <p><strong><a href="http://jsfiddle.net/utQsM/1/" rel="nofollow">JSFiddle</a></strong></p>
  
  <p>I just don't understand how to stop the background color changing once you have fired the <code>onmouseup</code> event.</p>
  
  <p>This is the code part that I am stuck on:</p>
  
  <pre><code>function mousedown() {
      var elements = document.querySelector('table').getElementsByTagName('td');
      for (var i = 0; i &lt; elements.length; i++) {
          elements[i].onmousemove = function() {
              this.style.background = "red";
          }
          elements[i].onmouseup = function() {
              this.style.background = "none";
          };
      }
  }
  </code></pre>