If you want display your own customized context menu on right mouse click, this program will help you.
Disable Context Menu
Whenever user right click on HTML document, The browser will show one default menu. We have to disable this first to display your own menu. You can do this by using below code.
<body oncontextmenu="return false">
Design Your Own Context Menu
Design a DIV with absolute position and limited width. Find the following basic design.
.rightClickPanel {
width:200px;
padding:20px;
position:absolute;
border:1px solid #ccc;
background:#ccc;
display:none;
}
<div class="rightClickPanel" ng-style="rightPanelStyle">
My right panel
</div>
Set Style to Context Menu based on Mouse Position
- $event.which - Key code of event ( 3 for right mouse click )
- $event.clientX - X coordinate of mouse click
- $event.clientY - Y coordinate of mouse click
$scope.detectRightMouseClick = function($event) { if($event.which === 3) { $scope.rightPanelStyle = {'display':'block','left':$event.clientX + 'px','top':$event.clientY + 'px'}; return false; } };
Thank you so much for sharing this worth able content with us. The concept taken here will be useful for my future programs and i will surely implement them in my study. Keep blogging article like this.
ReplyDeleteAngularjs course in chennai