仅当元素在AngularJS中悬停时才如何分配变量？

Question

I have a bunch of divs that can be hovered. 我有一堆可以悬停的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>

What I'd like to do is, when each .hoverable div is hovered, set the value of hover.hoveredNumber to the data-number attribute of the hovered element. 我想做的是，当悬停每个.hoverable div时，请将hover.hoveredNumber的值设置为悬停元素的data-number属性。

There must also be a condition where no element is hovered, and the value of hover.hoveredNumber is 0. 还必须存在一个条件，即没有元素悬停，并且hover.hoveredNumber值为0。

I've considered using ng-mouseover and ng-mouseleave to manually trigger mouseover and mouseleave events for each of the hoverable divs, and from there, determine which element is hovered. 我考虑过使用ng-mouseover和ng-mouseleave来手动触发每个可悬停div的mouseover和mouseleave事件，然后从那里确定要悬停的元素。

My issue is that each hoverable div also has a :hover style in the CSS. 我的问题是每个可悬浮div在CSS中也都具有:hover样式。 I understand that :hover is very reliable, but I don't trust the two separate mouse-detecting events to be as reliable, particularly if the user is moving their cursor very fast and one of the events is missed. 我知道:hover非常可靠，但是我不相信两个单独的鼠标检测事件同样可靠，尤其是如果用户快速移动光标并且错过了其中一个事件时。

I expect there to be, at times, some discrepancy between which element is reflected in hover.hoveredNumber and the element that is currently displaying its :hover ed style. 我希望有时在hover.hoveredNumber反映的元素与当前显示其:hover ed样式的元素之间会有一些差异。 The hoverable divs are also extremely close together and overlapping in some cases, and I'm concerned that the mouseover event of one div may fire before the mouseleave event of another, causing a discrepancy. 可悬停的div在某些情况下也非常靠近并重叠，我担心一个div的mouseover事件可能会在另一个mouseleave事件之前触发，从而导致差异。

How can I guarantee accuracy as to which element is being hovered? 我如何保证要悬停在哪个元素上的准确性？

Answer 1

If you want it to be responsive, avoid ng-mouseover and ng-mouseleave . 如果您希望它具有响应性，请避免使用ng-mouseover和ng-mouseleave 。 Those directives invoke AngularJS digest cycles with large computation overhead. 这些指令以较大的计算开销调用AngularJS摘要循环。

Instead use a custom directive: 而是使用自定义指令：

 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>

仅当元素在AngularJS中悬停时才如何分配变量？

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-07-24 00:59:30

仅当元素在AngularJS中悬停时才如何分配变量？

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-07-24 00:59:30

解决方案1
1 已采纳 2018-07-24 00:59:30