我有一个可以有 n 个嵌套 div 标签的环境。我必须仅在子 div 中跟踪鼠标的鼠标移动时刻。
我有以下代码。结果显示在列表中。
Problem:如果我附加更多子“div”,鼠标移动也会跟踪所有父级 div。
我想要的是:仅获取鼠标悬停区域的鼠标轨迹。
我还尝试使用 is:hover 进行过滤,但所有元素都悬停。JSFIddle https://jsfiddle.net/Simplybj/nr1g5mry/4/
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>
你应该使用event.stopPropagation() https://api.jquery.com/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;
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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)