如何处理angular.js中的右键单击事件？
有没有办法build立一个元素，使其左键单击（ng-click）执行一个动作，然后右键单击另一个动作？
现在我有这样的东西：
<span ng-click="increment()">{{getPointsSpent()}}</span> 我也想能够右键单击跨度来执行函数递减（）;
使用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}); }); }); }; });
小提琴上的代码示例
嗨，这是一个老问题，但我有一个解决scheme，我认为在某些情况下可能会更简单。 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; } }
这是一个工作小提琴 。 它与接受的答案一样工作，但不需要创build一个全新的指令。 虽然指令可能是更好的解决scheme，特别是如果您打算将右键单击函数附加到许多事情上。 但无论如何，另一种select。
一种方法是使用将事件处理程序绑定到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>
你可以使用这个指令 。
<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>
尝试这个
HTML
<div ng-app="sampleApp" ng-controller="AppCtrl "> <div> <a href="#" prevent-right-click>Click Me </a> </div> </div>
angular
var app = angular.module("sampleApp", []); app.controller("AppCtrl", function($scope) { console.log('called'); }) app.directive('preventRightClick', [ function() { return { restrict: 'A', link: function($scope, $ele) { $ele.bind("contextmenu", function(e) { e.preventDefault(); }); } }; } ])
