如何仅当元素悬停在AngularJS中时才分配变量？
如何仅当元素悬停在AngularJS中时才分配变量？
提问于 2018-07-24 03:05:01
我有一堆可以悬停的div。
<div ng-controller="HoverController as hover">
<div class="hoverable" data-number="1"></div>
<div class="hoverable" data-number="2"></div>
<div class="hoverable" data-number="3"></div>
</div>我想做的是，当悬停每个数据div时，将hover.hoveredNumber的值设置为悬停的元素的.hoverable -number属性。
还必须有一个条件，即没有元素悬停，并且hover.hoveredNumber的值为0。
我考虑过使用ng-mouseover和ng-mouseleave为每个可悬停的div手动触发mouseover和mouseleave事件，并从中确定悬停的元素。
我的问题是，每个可悬停的div在CSS中也有一个:hover样式。我知道:hover是非常可靠的，但我不相信两个单独的鼠标检测事件是可靠的，特别是当用户移动光标非常快并且其中一个事件丢失时。
我预计，在hover.hoveredNumber中反映的元素和当前显示其:hovered样式的元素之间有时会有一些差异。可悬停的div在某些情况下也非常接近和重叠，我担心一个div的mouseover事件可能会在另一个div的mouseleave事件之前触发，从而导致差异。
如何保证悬停在哪个元素上的准确性？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-24 08:59:30
如果您希望它具有响应性，请避免使用ng-mouseover和ng-mouseleave。这些指令调用具有大量计算开销的AngularJS摘要周期。
取而代之的是使用自定义指令：
angular.module("app",[])
.directive("detect",function() {
return {
link: postLink,
}
function postLink(scope,elem,attrs) {
elem.on("mouseover mouseleave", function(e) {
var $target = angular.element(e.target);
var num = $target.attr("data-number") || '0';
console.log("hover.hoveredNumber is",num);
})
}
}).hoverable {
background-color: red;
height: 20px;
width: 30px;
text-align: center;
border-radius: 10px;
} <script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
<fieldset detect>
<div class="hoverable" data-number="1">1</div>
<div class="hoverable" data-number="2">2</div>
<div class="hoverable" data-number="3">3</div>
</fieldset>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51485617
复制相关文章
相似问题