Làm cách nào để xử lý các sự kiện nhấp chuột phải trong angular.js?

Question

Có cách nào để thiết lập phần tử sao cho nó thực hiện một thao tác trên nhấp chuột trái (nhấp chuột phải) và sau đó thực hiện một hành động khác khi nhấp chuột phải không?

Ngay bây giờ tôi có một cái gì đó như:

<span ng-click="increment()">{{getPointsSpent()}}</span> 

Và tôi muốn cũng có thể kích chuột phải vào khoảng để thực hiện chức năng giảm một();

Answer 1

Bạn có thể sử dụng một chỉ thị để ràng buộc hành động cụ thể trên click chuột phải, bằng cách sử dụng sự kiện contextmenu:

app.directive('ngRightClick', function($parse) { 
    return function(scope, element, attrs) { 
     var fn = $parse(attrs.ngRightClick); 
     element.bind('contextmenu', function(event) { 
      scope.$apply(function() { 
       event.preventDefault(); 
       fn(scope, {$event:event}); 
      }); 
     }); 
    }; 
}); 

Code example on fiddle

Answer 2

Một cách là sử dụng một chỉ thị liên kết trình xử lý sự kiện với sự kiện contextmenu. Tôi đã có thời gian khó khăn để ngăn chặn sủi bọt để ngăn trình đơn mặc định hiển thị để thêm trình xử lý tập lệnh gốc cho document. Đã thử với e.stopPropagation(), e.preventDefault(), return false v.v. Kiểm tra các mục tiêu trong xử lý tài liệu dường như làm việc tốt

app.directive('rightClick',function(){ 
    document.oncontextmenu = function (e) { 
     if(e.target.hasAttribute('right-click')) { 
      return false; 
     } 
    }; 
    return function(scope,el,attrs){ 
     el.bind('contextmenu',function(e){ 
      alert(attrs.alert);    
     }) ; 
    } 
}); 

<button right-click alert="You right clciked me">Right click me</button> 

DEMO http://plnkr.co/edit/k0TF49GVdlhMuioSHW7i

Answer 3

Bạn có thể sử dụng số directive này.

<div ng-controller="demoCtrl" save-content="classic-html"> 
    <div contextmenu="{{lists}}" class="box" click-menu="clickMenu(item)" right-click="rightClick($event)"> 
    <span>normal dropmenu</span> 
    </div> 
</div> 

<script type="text/javascript"> 
angular.module('demo', ['ngContextMenu']) 

    .controller('demoCtrl', ['$scope', function($scope) { 
    $scope.lists = [{ 
     name: '11' 
    }, { 
     name: '22' 
    }] 

    $scope.clickMenu = function (item) { 
     console.log(item); 
    }; 

    $scope.rightClick = function (event) { 
     console.log(event); 
    }; 
    }]) 
</script> 

Answer 4

Xin chào, đây là một câu hỏi cũ nhưng tôi có một giải pháp mà tôi nghĩ có thể đơn giản hơn trong một số trường hợp. Các ngMousedown (và ngMouseup) chỉ được kích hoạt bởi nút chuột phải và có quyền truy cập vào các sự kiện chuột ban đầu thông qua $event vì vậy bạn có thể làm theo cách này:

<span ng-mousedown="handleClick($event)" 
     oncontextmenu="return false"> <!-- use this to prevent context menu --> 
      {{getPointsSpent()}} 
</span> 

Sau đó, trong bộ điều khiển, bạn có thể làm như sau:

$scope.handleClick(evt) { 
    switch(evt.which) { 
     case 1: 
      increment(); // this is left click 
      break; 
     case 2: 
      // in case you need some middle click things 
      break; 
     case 3: 
      decrement(); // this is right click 
      break; 
     default: 
      alert("you have a strange mouse!"); 
      break; 
    } 
} 

Đây là working fiddle. Nó hoạt động giống như câu trả lời được chấp nhận nhưng không yêu cầu tạo ra một chỉ thị hoàn toàn mới. Mặc dù chỉ thị có thể là giải pháp tốt hơn, đặc biệt nếu bạn định đính kèm các chức năng nhấp chuột phải vào nhiều thứ. Nhưng dù sao, một lựa chọn khác.