左クリック (ng-click) で 1 つのアクションを実行し、次に右クリックで別のアクションを実行するように要素を設定する方法はありますか?
今、私は次のようなものを持っています:
<span ng-click="increment()">{{getPointsSpent()}}</span>
また、スパンを右クリックして関数 decrement(); を実行できるようにしたいと思います。
左クリック (ng-click) で 1 つのアクションを実行し、次に右クリックで別のアクションを実行するように要素を設定する方法はありますか?
今、私は次のようなものを持っています:
<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;
}
}
ここに実用的なフィドルがあります。受け入れられた回答と同じように機能しますが、まったく新しいディレクティブを作成する必要はありません。ディレクティブはより良い解決策かもしれませんが、特に右クリック機能を多くのものにアタッチする予定がある場合はそうです。とにかく、別のオプションです。
1 つの方法は、イベント ハンドラーを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>
このディレクティブを使用できます。
<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>