Javascript preventDefault未停止默认鼠标操作_Javascript_Jquery_Angularjs_Event Handling

Javascript preventDefault未停止默认鼠标操作

javascript jquery angularjs

Javascript preventDefault未停止默认鼠标操作,javascript,jquery,angularjs,event-handling,Javascript,Jquery,Angularjs,Event Handling,我有一个简单的角度示例，我想捕捉鼠标右键单击的自定义操作。默认上下文菜单不得显示。我在这里读了一些问题。不幸的是，我无法阻止它打开浏览器内置的上下文菜单。我肯定我错过了一些简单的东西。（见普朗克） index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>My Plunk</title>

我有一个简单的角度示例，我想捕捉鼠标右键单击的自定义操作。默认上下文菜单不得显示。我在这里读了一些问题。不幸的是，我无法阻止它打开浏览器内置的上下文菜单。我肯定我错过了一些简单的东西。（见普朗克）

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>

如果要禁用上下文菜单，需要收听

contextmenu

事件以停止它

要在angular中实现这一点，可能需要添加自定义指令：

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

单击我

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

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