多次右键单击上下文菜单 angularjs

Question

我正在尝试在 angularjs 中使用此指令 contextMenu 实现右键单击下拉菜单。该指令在 firefox 中运行良好，但在使用“google chrome”打开另一个菜单时不会关闭旧菜单。知道我该如何更改它。这是 plunkr

(function(angular) {
  var ngContextMenu = angular.module('directive.contextMenu', []);

  ngContextMenu.directive('cellHighlight', function() {
    return {
      restrict: 'C',
      link: function postLink(scope, iElement, iAttrs) {
     iElement.find('td')
       .mouseover(function() {
         $(this).parent('tr').css('opacity', '0.7');
       }).mouseout(function() {
         $(this).parent('tr').css('opacity', '1.0');
       });
     }
 };
});

ngContextMenu.directive('context', [

function() {
  return {
    restrict: 'A',
    scope: '@&',
    compile: function compile(tElement, tAttrs, transclude) {
      return {
        post: function postLink(scope, iElement, iAttrs, controller) {
          var ul = $('#' + iAttrs.context),
            last = null;

          ul.css({
            'display': 'none'
          });
          $(iElement).bind('contextmenu', function(event) {
            event.preventDefault();
             ul.css({
              position: "fixed",
              display: "block",
              left: event.clientX + 'px',
              top: event.clientY + 'px'
            });
            last = event.timeStamp;
          });
          //$(iElement).click(function(event) {
          //  ul.css({
          //    position: "fixed",
          //    display: "block",
          //    left: event.clientX + 'px',
          //    top: event.clientY + 'px'
          //  });
          //  last = event.timeStamp;
          //});

          $(document).click(function(event) {
            var target = $(event.target);
            if (!target.is(".popover") && !target.parents().is(".popover")) {
              if (last === event.timeStamp)
                return;
              ul.css({
                'display': 'none'
              });
            }
          });
        }
      };
    }
     };
     }
  ]);
   })(window.angular);

Answer 1

查看（指令的）源代码，我认为这个上下文菜单指令有点太简单了。它只是在 context 属性引用的元素上触发 show/hide 而已。对于编写它的人的用例来说，它可能已经足够了，但对于通用解决方案来说，它似乎太轻了。

指令代码中发生了什么：如果您碰巧在同一行触发上下文菜单（或更一般地引用相同的上下文菜单），它会正常工作，因为它只会在不同的位置显示当前的上下文菜单地方。如果您首先触发 context1，然后（通过单击第二行）触发不同的上下文菜单 context2，则根本没有任何代码会触发 context1 上下文菜单的隐藏.

您也可以自己实施，但要跟踪所有已打开的上下文菜单，并在打开另一个菜单之前将其关闭。

顺便说一句：这个上下文菜单在 Firefox（38，Mac OS X）中对我不起作用。它打开上下文菜单并立即再次将其关闭。这可能是因为 contextmenu（在 table 行上）和 click（在文档上）都被触发了。

Answer 2

将 .click 事件更改为 .mouseup 事件，它将与 chrome 一起使用。

 $(document).mouseup(function(event) {
            var target = $(event.target);
            if (!target.is(".popover") && !target.parents().is(".popover")) {
              if (last === event.timeStamp)
                return;
              ul.css({
                'display': 'none'
              });
            }
          });

我遇到了同样的问题，它对我有用。 :)

多次右键单击上下文菜单 angularjs

multiple right click contextmenu angularjs

google-chrome

contextmenu

right-click

angularjs