title: Click handler for Button with SVG
body: <p>I have a button with an SVG as its logo:</p>
  
  <pre><code>&lt;div id="measure-representation"&gt;
    &lt;button type="button" class="btn" data-state="audio"&gt;Audio
      &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg" height="80px" data-state="audio"&gt;
        &lt;circle cx="50" cy="50" r="20" stroke="black" stroke-width="1" fill="#80ff00" opacity="1"&gt;&lt;/circle&gt;
      &lt;/svg&gt;
    &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The button has <code>data-state="audio"</code>, and because I am troubleshooting, the SVG does as well (not sure if SVG supports data-state).   I am trying to allow the user to click the button and then get the <code>data-state</code> from it, and do other things using that info.   The problem is if I click directly on the SVG within the button, it thinks I am clicking on the SVG, and not the button.  ( i have verified this by forcing the height and width attrivutes of the SVG, and clicking on the surrounding portion of the button.  I get the <code>data-state</code> when I click the button, but I get nothing when I click the SVG. </p>
  
  <p>I think this might be the selector code I am using (in backbone), but I alos think it might be solved with how I structure the HTMl of the button and the SVG, not sure which way is better convention, or possible.   </p>
  
  <p>Backbone view and click handler:</p>
  
  <pre><code>el : $("#measure-representation"), // Specifies the DOM element which this view handles
  
  events : {
    "click .btn" : "cycle",  //Trying to differentiate and/or 
    "click .svg" : "cycle"   //capture the btn click or the SVG click
  },
  ....
  cycle: function(button) {
    //This works if I click the button
    var buttonNewState = $(button.target).data('state');
    //Tried different ways to select the SVG from the JQuery event 
    var svgNewState = ....
  },
  </code></pre>
  
  <p>The paramater <code>button</code> in the <code>cycle</code> function is a JQuery event Object, so <code>$(button.target)[0]</code> is returning the HTML of what I am clicking on.   It returns the HTML of the button (which includes the SVG and the paths), or it is the SVG (and includes the paths), or it is the path I click on.   Would I have to put the <code>data-state</code> on every element in the button? or what better selector should I use to bubble up to get the <code>data-state</code> of the button?</p>
  
  <p>The SVG's are more than just a circle, so font-awesome cant be substituted.</p>