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

【问题标题】：multiple right click contextmenu angularjs多次右键单击上下文菜单 angularjs
【发布时间】：2015-06-03 17:41:21
【问题描述】：

我正在尝试在 angularjs 中使用此指令 contextMenu 实现右键单击下拉菜单。该指令在 Firefox 中运行良好，但在使用“谷歌浏览器”时打开另一个菜单时不会关闭旧菜单。知道如何对其进行更改。这是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);

【问题讨论】：

plunkr 看起来在我的谷歌浏览器中工作

标签： angularjs google-chrome contextmenu right-click

【解决方案1】：

将 .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'
              });
            }
          });

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

【讨论】：

【解决方案2】：

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

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

您也可以自己实现此功能，然后跟踪任何已打开的上下文菜单并在打开另一个上下文菜单之前将其关闭。

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

【讨论】：