仅跟踪嵌套div标签中悬停子元素的鼠标移动

Question

我的环境中可以有n个嵌套的div标签。我必须仅在子div中跟踪鼠标的鼠标移动时刻。

我有以下代码。结果显示在列表中。

问题：如果我添加更多子'div'，鼠标移动也会追踪所有父div。

我想要什么：只为鼠标悬停区域设置鼠标轨道。

此外我尝试过滤使用is：悬停但所有元素都悬停。 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

您应该使用event.stopPropagation()，请查看下面的代码段。

  

阻止事件冒泡DOM树，防止任何父处理程序收到事件通知。

希望这会有所帮助。

＆＃13;

＆＃13;

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++;
  }
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;