Question

117

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

rated 0 times [ 124] [ 7] / answers: 1 / hits: 18186 / 10 Years ago, sun, may 11, 2014, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

saiget

Add To Favorites

Follow

Total Points: 64

Total Questions: 105

Total Answers: 105

Location: Belarus

Member since Tue, Mar 14, 2023

1 Year ago

answered 10 Years ago parker · Accepted Answer

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.}