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();
To capture the right-click event in JavaScript, we can listen for the contextmenu event. el. addEventListener( "contextmenu", (ev) => { ev. preventDefault(); //... }, false );
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.
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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With