Как я могу обрабатывать события щелчка правой кнопкой мыши в angular.Джей?

Question

Как я могу обрабатывать события щелчка правой кнопкой мыши в angular.Джей?

есть ли способ настроить элемент так, чтобы он выполнял одно действие при щелчке левой кнопкой мыши (ng-click), а затем другое действие при щелчке правой кнопкой мыши?

сейчас у меня есть что-то вроде:

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

и я хотел бы также иметь возможность щелкнуть правой кнопкой мыши на промежутке, чтобы выполнить функцию decrement();

536 4

angularjs

4 ответов:

Comments

Ничего не найдено.

Bastien Caudan · Accepted Answer · 2013-11-17 12:39:53

вы можете использовать директиву для привязки конкретного действия по щелчку правой кнопкой мыши, используя 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});
            });
        });
    };
});
пример кода на скрипке

bradimus · Accepted Answer · 2016-02-20 00:05:40

Привет, это старый вопрос, но у меня есть решение, я думаю, что может быть проще в некоторых случаях. Директивы ngMousedown (и ngMouseup) запускаются правой кнопкой мыши и имеют доступ к исходному событию мыши через $event Так что вы могли бы сделать это таким образом:
<span ng-mousedown="handleClick($event)"
      oncontextmenu="return false">  
          {{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;
    }
}
здесь рабочая скрипку. Он работает так же, как и принятый ответ, но не требует создания совершенно новой директивы. Хотя директива может быть лучшим решением, особенно если вы планируете прикрепить функции щелчка правой кнопкой мыши ко многим вещам. Но в любом случае, другой вариант.

charlietfl · Accepted Answer · 2013-03-31 20:31:09

одним из способов является использование директиву, которая связывает обработчик событий contextmenu событие. Мне было трудно остановить пузырение, чтобы предотвратить меню по умолчанию, чтобы показать так добавлен обработчик собственного скрипта для document. Пробовал с e.stopPropagation(),e.preventDefault(),return false etc . Проверка цели в обработчике документов, кажется, работает хорошо
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

boia · Accepted Answer · 2015-03-03 16:49:12

вы можете использовать этот директива.

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