title: JS mouseenter triggered twice
body: <p>The problem is about event mouseenter which is triggered twice. 
  The code is here : <a href="http://jsfiddle.net/xyrhacom/" rel="nofollow">http://jsfiddle.net/xyrhacom/</a></p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;div id="elt1" class="elt" val="text1"&gt;
      text1
      &lt;div id="elt2" class="elt" val="text2"&gt;
          text2
      &lt;div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS : </p>
  
  <pre><code>$(document).ready(function() {
      $(".elt").mouseenter(function() {
          console.log($(this).attr('val'));
      });
  })
  </code></pre>
  
  <p>I understand the problem is the event is linked to the class attribute so it is triggered for each class, but I need to find a way to consider just the event triggered for the child.</p>
  
  <p>In the example, when mouseover text2, it displays in the console 'text2 text1' but I want to find a way to only display 'text2' (keeping the same HTML code)</p>