How to disable right click button using AngularJS ? (Quick Tutorial)

disable right click using angularjs

In this article, we will know how to disable right click button using AngularJS. We will make a simple AngularJS directive which will not allow the user to mouse’s right click and open the Context Menu.

Github

Demo

To do this we will override the default behaviour of the Context Menu. The contextmenu event is fired when the right button of the mouse is clicked (before the context menu is displayed), or when the context menu key is pressed (in which case the context menu is displayed at the bottom left of the focused element, unless the element is a tree, in which case the context menu is displayed at the bottom left of the current row). We can also use this same event to customise our Context Menu.

To use this directive in HTML code you just need to add disable-right-click as the element’s attribute. We simply use preventDefault() which cancels the event if it is cancelable, without stopping further propagation of the event. This prevents the Context Menu from getting opened. Although there are many ways to go around this but this should work fine for a normal internet user.

To read more about preventDefault() and contextmenu event you can refer to MDN.

 

Leave a Reply

Your email address will not be published. Required fields are marked *