Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I handle right-click events in angular.js?

Tags:

angularjs

Is there a way to have an element set up so that it performs one action on left-click (ng-click) and then another action on a right-click?

Right now I have something like:

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

And I'd like to also be able to right click on the span to perform the function decrement();

like image 451
infomofo Avatar asked Mar 31 '13 16:03

infomofo


People also ask

How can I capture the right-click event in JavaScript?

To capture the right-click event in JavaScript, we can listen for the contextmenu event. el. addEventListener( "contextmenu", (ev) => { ev. preventDefault(); //... }, false );

Which event handler is triggered by a right-click?

The contextmenu event fires when the user attempts to open a context menu. This event is typically triggered by clicking the right mouse button, or by pressing the context menu key.

How do you trigger an event in AngularJS?

element(newNode). triggerHandler('mousedown'); Will trigger the handler. The only thing is, this doesn't include any of the event data, so you will also have to remove the dependency on event.

How events are used in AngularJS?

Events in AngularJS can be added using the Directives mentioned below: ng-mousemove: Movement of mouse leads to the execution of event. ng-mouseup: Movement of mouse upwards leads to the execution of event. ng-mousedown: Movement of mouse downwards leads to the execution of event.


Video Answer


1 Answers

You can use a directive to bind specific action on right click, using the contextmenu event :

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});             });         });     }; }); 

Code example on fiddle

like image 158
Bastien Caudan Avatar answered Sep 30 '22 00:09

Bastien Caudan