Track only mouse move of hovered child element in a nested div tag

Question

I have an environment where there can be n number of nested div tag.I have to track the mouse move moment of the mouse only in child div.

I have the following code. the result is displayed in the list.

Problem: if i append more child 'div' the mouse move tracks all the parents div too.

What i want: get the mouse track for only mouse hover area.

Also i tried to filter using is:hover but all the elements are hovered. JSFIddle

var count = 0;
$('div').on({
  mousemove: function(event) {
    $('.mousemovement').append('<li>MouseMove' + $(this).attr('class') + '</li>');

    if (count > 10) {
      $('.mousemovement').html('');
      count = 0;
    }
    count++;
  }
});

.outer {
  background-color: #aeaeae;
  height: 200px;
  width: 200px;
  float: left;
}

.inner {
  margin: 5px 0px;
  background-color: #ccc;
  height: 100px;
  width: 100px;
  float: left;
}

.inner2 {
  margin: 5px 0px;
  background-color: green;
  height: 60px;
  width: 60px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="outer">
  <div class="inner">
    <div class="inner2">

    </div>
  </div>
</div>

<ul class="mousemovement">

</ul>

Answer 1

You should use event.stopPropagation(), check snippet below.

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

Hope this helps.

---

var count = 0;
$('div').on({
  mousemove: function(event) {
    event.stopPropagation();
    $('.mousemovement').append('<li>MouseMove' + $(this).attr('class') + '</li>');

    if (count > 10) {
      $('.mousemovement').html('');
      count = 0;
    }
    count++;
  }
});

.outer {
  background-color: #aeaeae;
  height: 200px;
  width: 200px;
  float: left;
}

.inner {
  margin: 5px 0px;
  background-color: #ccc;
  height: 100px;
  width: 100px;
  float: left;
}

.inner2 {
  margin: 5px 0px;
  background-color: green;
  height: 60px;
  width: 60px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  <div class="inner">
    <div class="inner2">

    </div>
  </div>
</div>

<ul class="mousemovement">

</ul>