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;
}
Markup
Whenever user clicks on the div, detectRightMouseClick will be called. This function will detect right mouse click, and displays context menu exactly at that location. clickOutside is the directive which detects outside click of the context menu, so we can close it.
<div (mouseup)="detectRightMouseClick($event)" style="border:1px solid #ccc;padding:15px;width:100%"> Right Mouse click here </div> <div class="rightClickPanel" [ngStyle]="rightPanelStyle" (clickOutside)="closeContextMenu()"> 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
Script
Observe detectRightMouseClick fucntion
import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <div (mouseup)="detectRightMouseClick($event)" style="border:1px solid #ccc;padding:15px;width:100%"> Right Mouse click here </div> <div class="rightClickPanel" [ngStyle]="rightPanelStyle" (clickOutside)="closeContextMenu()"> My right panel </div> ` }) export class AppComponent { rightPanelStyle: Object = {}; detectRightMouseClick($event) { if($event.which === 3) { this.rightPanelStyle = {'display':'block','left':$event.clientX + 'px','top':$event.clientY + 'px'}; return false; } } closeContextMenu() { this.rightPanelStyle = {'display':'none'}; } }
clickOutSide directive
This directive is for detecting click outside of the context menu
import {Directive, ElementRef, Output, EventEmitter, HostListener} from '@angular/core'; @Directive({ selector: '[clickOutside]' }) export class ClickOutsideDirective { constructor(private _elementRef: ElementRef) { } @Output() public clickOutside = new EventEmitter<MouseEvent>(); @HostListener('document:click', ['$event', '$event.target']) public onClick(event: MouseEvent, targetElement: HTMLElement): void { if (!targetElement) { return; } const clickedInside = this._elementRef.nativeElement.contains(targetElement); if (!clickedInside) { this.clickOutside.emit(event); } } }
When i right click i am getting default browser's options, how can we disable them ?
ReplyDeletebody oncontextmenu="return false"
DeletePositive site, where did u come up with the information on this posting?I have read a few of the articles on your website now, and I really like your style. Thanks a million and please keep up the effective work. cosas originales para regalar
ReplyDeleteIt's incredibly an amazing and key bit of information.I'm in remarkable spirits that you in a general sense offered this confounding information to us.Click Here
ReplyDeleteImproper maintenance of your pool can lead to various issues. There may be an excess of debris in your pool or the pool water turning green, and your pool pump can burn out.
ReplyDeleteIn order to avoid such issues, regular maintenance is required. It would be best to hire professionals for pool repair in magnolia Tx as soon as you find any problem.
When we specifically talk about online poker, there has been a wave of acceptance for the card game over the last few years. https://rouletteonline.guru/software/ The comfort of playing from anywhere you want, the ease of money transactions, and added social and entertainment factors, has made poker a lot more accessible and exciting.
ReplyDelete