Question

enter image description here

我试图在angularjs中使用此指令contextMenu实现右键单击下拉列表。这个指令在firefox中工作正常，但在使用＆＃39;时打开另一个菜单时不会关闭旧菜单。谷歌浏览器＆＃39;。知道如何更改它。这是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

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

我遇到了同样的问题，它对我有用。：）

Answer 2

查看源代码（指令），我认为这个上下文菜单指令有点过于简单了。除了触发context属性引用的元素上的显示/隐藏之外，它根本不会做很多事情。它可能已经足够用于编写它的人的用例，但它似乎太轻了，无法通用解决方案。

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

您也可以自己实现，但随后跟踪任何已打开的上下文菜单，并在打开另一个菜单之前关闭它们。

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

多次右键单击contextmenu angularjs

2 个答案: