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

Question

有没有办法设置一个元素,以便它左键单击(ng-click)执行一个操作,然后右键单击另一个操作？

现在我有类似的东西:

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

而且我还想能够右键单击跨度来执行函数减量();

Answer 1

您可以使用指令在右键单击时绑定特定操作,使用以下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});
            });
        });
    };
});

关于小提琴的代码示例

Answer 2

嗨这是一个老问题,但我认为在某些情况下我认为可能更简单.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;
    }
}

这是一个工作小提琴.它的工作原理与接受的答案相同,但不需要创建全新的指令.虽然指令可能是更好的解决方案,特别是如果您计划将右键单击功能附加到很多东西上.但无论如何,另一种选择.

Answer 3

一种方法是使用将事件处理程序绑定到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>

DEMO http://plnkr.co/edit/k0TF49GVdlhMuioSHW7i