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

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

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

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

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

66 голосов | спросил infomofo 31 MarpmSun, 31 Mar 2013 20:26:31 +04002013-03-31T20:26:31+04:0008 2013, 20:26:31

4 ответа


0

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

Пример кода на скрипке

ответил Bastien Caudan 31 MarpmSun, 31 Mar 2013 21:44:39 +04002013-03-31T21:44:39+04:0009 2013, 21:44:39
0

Привет, это старый вопрос, но у меня есть решение, которое, я думаю, может быть проще в некоторых случаях. Директивы 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;
    }
}

Вот рабочая скрипка . Он работает так же, как принятый ответ, но не требует создания совершенно новой директивы. Хотя директива может быть лучшим решением, особенно если вы планируете прикреплять функции правой кнопки мыши ко многим вещам. Но в любом случае, другой вариант.

ответил bradimus 20 FebruaryEurope/MoscowbSat, 20 Feb 2016 01:05:40 +0300000000amSat, 20 Feb 2016 01:05:40 +030016 2016, 01:05:40
0

Одним из способов является использование директивы, которая связывает обработчик событий с событием 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>

DEMO

ответил charlietfl 31 MarpmSun, 31 Mar 2013 21:24:26 +04002013-03-31T21:24:26+04:0009 2013, 21:24:26
0

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

<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>
ответил boia 3 MarpmTue, 03 Mar 2015 17:49:12 +03002015-03-03T17:49:12+03:0005 2015, 17:49:12

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132