Like the title says, I'm not sure why $event.preventDefault() is not preventing the context menu from appearing on right click.
I've written this simple example in plunker to demonstrate the problem.
Html:
<body ng-controller="MainCtrl">
<div id="me" ng-mousedown="stopContext($event)">CLICK ME {{num}}</div>
</body>
Javascript:
$scope.stopContext = function(ev) {
$scope.num += 1;
ev.preventDefault();
};
Thanks in advance.
Like the title says, I'm not sure why $event.preventDefault() is not preventing the context menu from appearing on right click.
I've written this simple example in plunker to demonstrate the problem.
Html:
<body ng-controller="MainCtrl">
<div id="me" ng-mousedown="stopContext($event)">CLICK ME {{num}}</div>
</body>
Javascript:
$scope.stopContext = function(ev) {
$scope.num += 1;
ev.preventDefault();
};
Thanks in advance.
Share Improve this question asked May 11, 2014 at 7:01 BenBen 10.3k21 gold badges103 silver badges158 bronze badges 1- context menu show not on mousedown – Grundy Commented May 11, 2014 at 7:16
1 Answer
Reset to default 12In order to prevent the context-menu you need to capture (and prevent) the contextmenu event.
Unfortunately, Angular does not have a directive for this event, so you'll have to create one yourself.
"Copying" from the source code of Angular (version 1.2.16):
app.directive('myContextmenu', function ($parse) {
return {
pile: function (tElem, tAttrs) {
var fn = $parse(tAttrs.myContextmenu);
return function (scope, elem) {
elem.on('contextmenu', onContextmenu);
function onContextmenu(evt) {
scope.$apply(function () {
fn(scope, {$event: evt});
});
});
};
}
};
});
Then, you can use it like this:
<div id="me" my-contextmenu="stopContext($event)">CLICK ME {{num}}</div>
See, also, this short demo.
Tested on latest version of Chrome, Firefox and Safari and found working.