角度 JS 指令模糊事件不适用于链接菜单

Angular JS directive blur event not working with link menu?

本文关键字:适用于 链接 菜单 不适用 事件 JS 指令 模糊 角度      更新时间:2023-09-26

我在角度js中创建了链接菜单指令,该指令将在按回车键和鼠标悬停时显示菜单项,但我希望在菜单失去焦点时在模糊事件中隐藏此菜单的功能。

我尝试了ng-blur指令(ng-blur="linkMenuHoverOut($event)"),甚至我创建了自定义指令on-blur(on-blur="linkMenuHoverOut($event)")来管理模糊事件,但它不起作用。

请给我解决这个问题的建议。谢谢!!

指令代码:

<div>
    <div tabindex="0" class="link-div" data-ng-keydown="onLinkKeyPress($event)" data-ng-click="onLinkClick($event)" aria-label="Link Menu - Press enter for more options" ng-mouseenter="linkMenuHoverIn($event)">
        <a id="aPrintText">Link Menu</a>
    </div>
    <div id="divLinkMenu" ng-show="showLinkMenu" ng-mouseleave="linkMenuHoverOut($event)"  style="margin-top: 18px">
        <ul class="link-dropdown-menu" on-blur="linkMenuHoverOut($event)">
            <li tabindex="0" id="{{'linkMenu'+menuItem.id}}" ng-repeat="menuItem in masterMenuItems" data-ng-click="onMenuItemClick($event, menuItem)">
                <a class="link-menu-link" aria-label="{{menuItem.name}}">{{menuItem.name}}
          </a>
            </li>
        </ul>
    </div>
</div>
app.directive('linkMenu', ['$window', '$timeout', '$location', 'KeyCodeConstant',
  function(window, timeout, location, keyCodeConstant) {
    return {
      restrict: "E",
      replace: true,
      transclude: true,
      templateUrl: 'menu.html',
      link: function(scope, element, attrs, controller) {
        scope.showLinkMenu = false;
        scope.masterMenuItems = [{
          id: 1,
          name: "Menu Item1"
        }, {
          id: 2,
          name: "Menu Item2"
        }];
        scope.onLinkKeyPress = function(event) {
          if (event.keyCode !== keyCodeConstant.ENTER_KEY) {
            return;
          }
          scope.onLinkClick(event);
        }
        scope.onLinkClick = function($event) {
          if (scope.showLinkMenu) {
            scope.showLinkMenu = false;
          } else {
            scope.showLinkMenu = true;
          }
          scope.linkMenuHoverIn($event);
          var uiElement = element.find('#linkMenu1');
          timeout(function() {
            if (uiElement) {
              uiElement.focus();
            }
          });
          event.stopPropagation();
        };
        scope.onMenuItemClick = function(event, menuItem) {
          scope.linkMenuHoverOut(event);
          showAlert(menuItem.id);
        };
        scope.linkMenuHoverIn = function(event) {
          showHidePrintMenu(true);
          scope.showLinkMenu = true;
          event.stopPropagation();
        };
        scope.linkMenuHoverOut = function(event) {
          showHidePrintMenu(false);
          scope.showLinkMenu = false;
          event.stopPropagation();
        }
        function showAlert(menuId) {
          timeout(function() {
            alert('Menu ' + menuId + ' Clicked');
          }, 50); //Print Current Window
        };

        function showHidePrintMenu(isShow) {
          var printMenuContainer = angular.element('#divLinkMenu');
          if (printMenuContainer) {
            if (isShow) {
              printMenuContainer.show();
            } else {
              printMenuContainer.hide();
            }
          }
        }
      }
    }
  }
]);

app.directive('onBlur', function() {
  return function(scope, element, attrs) {
    element.bind('blur', function(event) {
      scope.$apply(function() {
        scope.$eval(attrs.onBlur, {
          'event': event
        });
      });
      event.preventDefault();
    });
  };
});
app.constant("KeyCodeConstant", {
  ENTER_KEY: 13,
  UPARROW_KEY: 38,
  DOWNARROW_KEY: 40
});

我相信这可能是由你的event.stopPropagation()引起的;点击处理程序中的代码。 单击其他元素后会发生模糊。 停止传播可能会阻止在某些浏览器中发生模糊事件。