angular.js에서 오른쪽 클릭 이벤트를 어떻게 처리합니까?

angular.js에서 오른쪽 클릭 이벤트를 어떻게 처리합니까?

---

요소를 설정하여 왼쪽 클릭 (ng-click)에서 한 작업을 수행 한 다음 오른쪽 클릭에서 다른 작업을 수행하도록하는 방법이 있습니까?

지금은 다음과 같습니다.

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

그리고 함수 decrement ();를 수행하기 위해 스팬을 마우스 오른쪽 버튼으로 클릭 할 수도 있습니다.

---

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});
            });
        });
    };
});

바이올린의 코드 예제

---

안녕하세요 이것은 오래된 질문이지만 어떤 경우에는 더 간단하다고 생각하는 해결책이 있습니다. ngMousedown (및 ngMouseup) 지시문은 마우스 오른쪽 버튼으로 트리거되며 원본 마우스 이벤트에 액세스 $event할 수 있으므로 다음과 같이 할 수 있습니다.

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

그런 다음 컨트롤러에서 다음을 수행 할 수 있습니다.

$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;
    }
}

여기에 작동하는 바이올린이 있습니다. 수락 된 답변과 동일하게 작동하지만 완전히 새로운 지침을 만들 필요는 없습니다. 지시문이 더 나은 솔루션 일 수 있지만, 특히 많은 항목에 오른쪽 클릭 기능을 추가하려는 경우 더욱 그렇습니다. 그러나 어쨌든 다른 옵션.

---

한 가지 방법은 이벤트 처리기를 contextmenu이벤트에 바인딩하는 지시문을 사용하는 것입니다 . 기본 메뉴가 표시되지 않도록 버블 링을 중지하는 데 어려움을 겪었습니다 document. 로 시도 e.stopPropagation(), e.preventDefault(), return false등. 문서 처리기에서 대상 확인이 잘 작동하는 것 같습니다.

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>

데모 http://plnkr.co/edit/k0TF49GVdlhMuioSHW7i

---

이 지시문을 사용할 수 있습니다 .

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

참고URL : https://stackoverflow.com/questions/15731634/how-do-i-handle-right-click-events-in-angular-js