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

有没有一种方法可以设置一个元素，让它在左键单击(ng-click)时执行一个操作，然后在右键单击时执行另一个操作？

现在我有这样的东西:

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

我还希望能够右键单击 span 来执行函数递减() ;

87170 次浏览
小开

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

小开
最佳答案

您可以使用一个指令来绑定右键单击的特定操作，使用 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});
});
});
};
});

小提琴代码示例

小开

你可以用这个 指令。

<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>
小开

嗨，这是一个老问题，但我有一个解决方案，我认为可能在某些情况下更简单。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;
}
}

这是 工作小提琴。它的工作原理与公认的答案相同，但不需要创建一个全新的指令。虽然一个指令可能是一个更好的解决方案，特别是如果您计划将右键单击函数附加到许多东西。不管怎样，还有一个选择。


提交答案