AngularJs中的MouseEnter与MouseOver

Question

AngularJs中的MouseEnter与MouseOver

Roh*_*hit 18 html javascript mouseevent angularjs

我正在玩AngularJS鼠标事件并遇到了问题.我知道MouseEnter事件在鼠标进入元素的容器时触发,并且在为所有子元素触发MouseOver之后触发.感谢这个动画可视化鼠标事件

但事实证明,在我的情况下,MouseEnter事件永远不会被触发.我正在开发Angular PhoneCat应用程序(步骤10)并做了以下修改:

Controllers.js:添加了记录鼠标事件的方法
phone-details.html:添加了ng-mouseenter和ng-mouseleave处理程序

    $scope.logMouseEvent = function() {
        switch (event.type) {
          case "mouseenter":
            console.log("Hey Mouse Entered");
            break;

          case "mouseleave":
            console.log("Mouse Gone");
            break;

          default:
            console.log(event.type);
            break;
        }

Run Code Online (Sandbox Code Playgroud)

<ul class="phone-thumbs">
  <li ng-repeat="img in phone.images">
    <img ng-src="{{img}}" ng-Click="setImage(img)" ng-mouseenter="logMouseEvent()" ng-mouseleave="logMouseEvent()">
  </li>
</ul>

Run Code Online (Sandbox Code Playgroud)

结果:

仅记录鼠标悬停和mouseout事件

题:

这种行为是否发生,因为图像是ul元素,我们在子元素中移动鼠标？以及如何在图像上获得mouseenter事件？

谢谢在此输入图像描述

Answer 1

小智 9

Angular的ngMouseenter指令触发一个类型为鼠标悬停的事件,正如您在此plunker中所看到的.

与ngMouseover的区别在于它只被触发一次 - 当鼠标进入元素时,而不是在此元素内的每次移动之后.

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>

<body ng-app="">
  <button ng-mouseenter="lastEventType=$event.type">
    Enter
  </button>
  Event type: {{lastEventType}}
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，9 月前
查看次数：	17297 次
最近记录：	10 年，9 月前