angular.js에서 우클릭 이벤트를 처리하려면 어떻게 해야 합니까?

angular.js에서 우클릭 이벤트를 처리하려면 어떻게 해야 합니까?

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

지금 제겐 다음과 같은 게 있어요.

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

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

바이올린 코드 예시

안녕하세요, 이것은 오래된 질문이지만 경우에 따라서는 더 간단할 수 있는 해결책이 있습니다.ngMushown(및 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