title: AngularJS: Preventing 'mouseenter' event triggering on child elements
body: <p>I'm playing right now with the AngularJS framework and I stumbled upon a problem. I made a directive which is called 'enter'. It triggers functions on <code>mouseenter</code> and <code>mouseleave</code>. I applied it as an attribute to the table row elements. It is now <strong>triggered for every child element</strong> (all the columns and etc), but it should be only triggered, when you go with your mouse over the table row.</p>
  
  <p>This is how my directive looks like:
  </p>
  
  <pre><code>myapp.directive('enter', function(){
      return {
          restrict: 'A', // link to attribute... default is A
          link: function (scope, element){
              element.bind('mouseenter',function() {
                  console.log('MOUSE ENTER: ' + scope.movie.title);
              });
              element.bind('mouseleave',function() {
                  console.log('LEAVE');
              });
          }
      }
  });
  </code></pre>
  
  <p>Here is an example:  <a href="http://jsfiddle.net/dJGfd/1/" rel="nofollow">http://jsfiddle.net/dJGfd/1/</a></p>
  
  <p><em>You have to open the Javascript console to see the log messages.</em></p>
  
  <p>What is the best way to achieve the functionality that I want in AngularJS? I prefer to <strong>not</strong> use jQuery if there is a reasonable AngularJS solution.</p>