title: Binding click function to all elements within an anchor tag with prototype
body: <p>I have html like this:</p>
  
  <pre><code>&lt;ol id="test-ol"&gt;
      &lt;li&gt;
          &lt;a href="http://example.com"&gt;
              &lt;span class="myspan"&gt;test&lt;/span&gt;
              not in span
              &lt;span class="myspan"&gt;test2&lt;/span&gt;
          &lt;/a&gt;
      &lt;/li&gt;
      ...
  &lt;/ol&gt;
  </code></pre>
  
  <p>and the following JavaScript (Prototype):</p>
  
  <pre><code>$$('#test-ol a').each(function(narrowByElement){
      Event.observe($(narrowByElement),'click',onToolbarClick.bind(this));
  });
  
  onToolbarClick = function(event){
      var href = Event.element(event).readAttribute('href');
      console.log(href);
      Event.stop(event);
  }
  </code></pre>
  
  <p>Clicking on the non-span part within the anchor tag would log the right href, but clicking on the "test" part within the span would return null.</p>
  
  <p>So how can I bind my click function to all the elements within my anchor tag?</p>