如何处理angular.js中的右键单击事件？

有没有一种方法可以设置一个元素，使其在左键单击（ng-click）上执行一个动作，然后在右键单击上执行另一个动作？

现在我有类似的东西：

<span ng-click="increment()">{{getPointsSpent()}}</span>

而且我还希望能够在跨度上单击鼠标右键以执行函数decrement（）;。

您可以使用指令，通过contextmenu事件来绑定右键单击时的特定操作：

app.directive('ngRightClick', function($parse) {
    return function(scope, element, attrs) {
        var fn = $parse(attrs.ngRightClick);
        element.bind('contextmenu', function(event) {
            scope.$apply(function() {
                event.preventDefault();
                fn(scope, {$event:event});
            });
        });
    };
});

小提琴上的代码示例

您好，这是一个古老的问题，但是我有一个解决方案，我认为在某些情况下可能会更简单。ngMousedown（和ngMouseup）指令由鼠标右键触发，并可以通过其访问原始鼠标事件，$event因此您可以通过以下方式进行操作：

<span ng-mousedown="handleClick($event)"
      oncontextmenu="return false">  <!-- use this to prevent context menu -->
          {{getPointsSpent()}}
</span>

然后，在控制器中，您可以执行以下操作：

$scope.handleClick(evt) {
    switch(evt.which) {
        case 1:
            increment(); // this is left click
            break;
        case 2:
            // in case you need some middle click things
            break;
        case 3:
            decrement(); // this is right click
            break;
        default:
            alert("you have a strange mouse!");
            break;
    }
}

这是工作中的小提琴。它的工作原理与接受的答案相同，但不需要创建一个全新的指令。尽管指令可能是更好的解决方案，尤其是如果您打算将右键单击功能附加到很多东西上，则尤其如此。但是无论如何，另一种选择。

一种方法是使用将事件处理程序绑定到contextmenu事件的指令。我很难停止冒泡，以防止出现默认菜单，因此为添加了本机脚本处理程序document。试图用e.stopPropagation()，e.preventDefault()，return false等。在文档处理程序中检查目标似乎运行良好

app.directive('rightClick',function(){
    document.oncontextmenu = function (e) {
       if(e.target.hasAttribute('right-click')) {
           return false;
       }
    };
    return function(scope,el,attrs){
        el.bind('contextmenu',function(e){
            alert(attrs.alert);               
        }) ;
    }
});

<button right-click alert="You right clciked me">Right click me</button>

演示http://plnkr.co/edit/k0TF49GVdlhMuioSHW7i

您可以使用此指令。

<div ng-controller="demoCtrl" save-content="classic-html">
  <div contextmenu="{{lists}}" class="box" click-menu="clickMenu(item)" right-click="rightClick($event)">
    <span>normal dropmenu</span>
  </div>
</div>

<script type="text/javascript">
angular.module('demo', ['ngContextMenu'])

  .controller('demoCtrl', ['$scope', function($scope) {
    $scope.lists = [{
      name: '11'
    }, {
      name: '22'
    }]

    $scope.clickMenu = function (item) {
      console.log(item);
    };

    $scope.rightClick = function (event) {
      console.log(event);
    };
  }])
</script>