Question

我有这个简单的角度示例，我想捕获鼠标右键单击以执行自定义操作。默认上下文菜单不得显示。我在这里读了这些问题。不幸的是，我无法阻止它打开上下文菜单中内置的浏览器。我确定我在这里错过了一些简单的东西。（参见plunker http://plnkr.co/edit/YieQh23xNUFmPrjZscGB）

的index.html

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <title>My Plunk</title>
    <script data-require="jquery@2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="plunker" ng-controller="myController">
    <p ng-mousedown="mouseClicked($event)">Click me!</p>
  </body>

</html>

的script.js

var app = angular.module('plunker', []);

app.controller('myController', ['$scope', '$log', function($scope, $log) {
  $scope.mouseClicked = function(event) {
    if (event.button===2) {
      $log.debug('right mouse click detected')
      // don't do anything else
      event.preventDefault();
      event.stopPropagation();
    }
  };
}]);

Answer 1

如果要禁用上下文菜单，则需要收听contextmenu事件才能停止它。

要以角度实现此目的，您可能需要添加自定义指令：

app.directive('noContextMenu', [function() {
  return function(scope, ele, attr){
    ele.on('contextmenu', function(e) {
      e.preventDefault();
    });
  }
}]);

<p no-context-menu >Click me!</p>

preventDefault没有停止默认鼠标handlng

1 个答案: