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

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.

Enquirer: Ben

||

Solution #1:

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.

Respondent: gkalpak

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Leave a Reply

Your email address will not be published.