Why does $event.preventDefault() in AngularJS not prevent context menu from appearing?

StackOverflow https://stackoverflow.com/questions/23589900

  •  19-07-2023
  •  | 
  •  

Question

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.

Was it helpful?

Solution

In 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 {
    compile: 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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top