title: Add click event to element, but not its children in angular
body: <p>I know this can be done with jQuery as shown here: <a href="https://stackoverflow.com/questions/9183381/how-to-have-click-event-only-fire-on-parent-div-not-children">How to have click event ONLY fire on parent DIV, not children?</a></p>
  
  <pre><code>$('.foobar').on('click', function(e) {
    if (e.target !== this)
      return;
  
    alert( 'clicked the foobar' );
  });
  </code></pre>
  
  <p>But in angular, <code>this</code> keyword is not binded to the element when I use something like:</p>
  
  <pre><code>&lt;div ng-dblclick="ctrl.doubleClickHandler($event)"&gt;
      parent, event should fire here.
      &lt;div&gt;child, event should not fire here.&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and in my controller:</p>
  
  <pre><code>this.doubleClickHandler = doubleClickHandler;
  function doubleClickHandler(event) {
    console.log(this); // this binds to controller
    console.log(event);
  }
  </code></pre>
  
  <p>The event <strong>fires</strong>, but I need to prevent it from firing when I click on the element's children.</p>
  
  <p>I don't want to hardcode a check on the <code>event.target</code> based on class or attribute because it might change later. Is there anyway to achieve this within the HTML tag, or in JavaScript without hardcoding the element's class or attributes (similar to the technique of binding the <code>this</code> keyword in jQuery)?</p>