只追踪嵌套div标签中的悬停子元素的鼠标移动 [英] Track only mouse move of hovered child element in a nested div tag

问题描述

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

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

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

我想要什么：获取仅鼠标悬停区域的鼠标轨迹。

另外我尝试过滤使用is：hover，但所有元素都被徘徊。
JSFIddle

<$ c $ （'mousemovement'）。append（'< li> MouseMove'+ $（this）.attr（'如果（count> 10）{$（'。mousemovement'）。html（''）; count = 0;} count ++;}}）;

.outer {background-color：#aeaeae; height：200px;宽度：200px; float：left;}。inner {margin：5px 0px; background-color：#ccc; height：100px;宽度：100px; float：left;}。inner2 {margin：5px 0px;背景颜色：绿色;身高：60px;宽度：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>

解决方案

您应该使用 event.stopPropagation（），检查下面的代码片段。

防止事件冒泡DOM树，处理程序从事件通知。

希望这有助于。

---

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;宽度：200px; float：left;}。inner {margin：5px 0px; background-color：#ccc; height：100px;宽度：100px; float：left;}。inner2 {margin：5px 0px;背景颜色：绿色;身高：60px;宽度：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>

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>

解决方案

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>

这篇关于只追踪嵌套div标签中的悬停子元素的鼠标移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！