web-dev-qa-db-ja.com

AngularJsでのMouseEnterとMouseOverの比較

AngularJSマウスイベントで遊んでいて、問題が発生しました。私は知っていますMouseEnterイベントは、要素のコンテナーにマウスが入ると発生し、その後MouseOverはすべての子要素に対して発生します。このアニメーションのおかげで マウスイベントの視覚化

ただし、私の場合、MouseEnterイベントは発生しません。私はAngular PhoneCatアプリケーション（step-10））に取り組んでおり、以下の変更を行いました：

  1. Controllers.js：マウスイベントをログに記録するメソッドが追加されました
  2. 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;
        }
<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>

結果：

mouseoverおよびmouseoutイベントのみがログに記録されます

質問：

画像がul要素であり、子要素でマウスを移動しているため、この動作が発生していますか？そして、どうすれば画像でmouseenterイベントを取得できますか？

ありがとうございました enter image description here

javascripthtmlangularjsmouseevent
18
Rohit

AngularのngMouseenterディレクティブは、タイプがmouseoverであるイベントを発生させます。これは this plunker で確認できます。

NgMouseoverとの違いは、この要素内でのすべての動きの後ではなく、要素にマウスが入るときに1回だけ起動されることです。

<!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>
9
audonex