71

左クリック (ng-click) で 1 つのアクションを実行し、次に右クリックで別のアクションを実行するように要素を設定する方法はありますか?

今、私は次のようなものを持っています:

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

また、スパンを右クリックして関数 decrement(); を実行できるようにしたいと思います。

4

4 に答える 4

140

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

フィドルのコード例

于 2013-03-31T17:44:39.497 に答える
27

こんにちは、これは古い質問ですが、場合によってはもっと簡単だと思う解決策があります。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;
    }
}

ここに実用的なフィドルがあります。受け入れられた回答と同じように機能しますが、まったく新しいディレクティブを作成する必要はありません。ディレクティブはより良い解決策かもしれませんが、特に右クリック機能を多くのものにアタッチする予定がある場合はそうです。とにかく、別のオプションです。

于 2016-02-19T22:05:40.310 に答える
7

1 つの方法は、イベント ハンドラーをcontextmenuイベントにバインドするディレクティブを使用することです。デフォルトのメニューが表示されないようにするためにバブリングを止めるのに苦労したので、 のネイティブスクリプトハンドラーを追加しましたdocumente.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

于 2013-03-31T17:24:26.247 に答える
1

このディレクティブを使用できます。

<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>
于 2015-03-03T14:49:12.860 に答える