title: AngularJs ng-click $event passes child element as target
body: <p>For each <em>td</em> element in a table I have an attached ng-click. Here is the (simplified) html for each table cell:</p>
  
  <pre><code>&lt;td ng-click="cellClicked($event)"&gt;
      &lt;span ng-if="!cellEdit"&gt;{{event.eventName}}&lt;/span&gt;
      &lt;input type="text" ng-if="cellEdit" ng-model="event.eventName"&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>And my (simplified) ng-click function:</p>
  
  <pre><code>scope.cellClicked = function (event) {
    rowScope.cellEdit = true
    angular.element(event.target).find('input').focus()
  }
  </code></pre>
  
  <p>Its my goal to:</p>
  
  <ol>
  <li>User clicks a table cell</li>
  <li>Cell changes to "edit mode"</li>
  <li>Give focus to the <em>input</em> element located inside the <em>td</em>.</li>
  </ol>
  
  <p>Right now this is working as long as the user clicks <strong>inside the td element but not on the span element</strong>:</p>
  
  <pre><code>console.log(angular.element(event.target)) #--&gt; [td...] (as desired)
  </code></pre>
  
  <p>However if the user clicks on the span element within the td:</p>
  
  <pre><code>console.log(angular.element(event.target)) #--&gt; [span...]
  </code></pre>
  
  <p>In this use case assigning focus does not work. I was hoping to access the parent element of the <em>span</em> doing something like:</p>
  
  <pre><code>angular.element(event.target.closest('td'))
  </code></pre>
  
  <p>or</p>
  
  <pre><code>angular.element(event.target.parentNode)
  </code></pre>
  
  <p>But it appears when an element gets passed through via $event and accessed there is no parent context.</p>
  
  <p>How can I either:</p>
  
  <ul>
  <li>Prevent clicking the <em>span</em> element firing the <em>td</em>'s ng-click</li>
  <li>On click of <em>span</em> element pass through it's html parent</li>
  </ul>