Angular - How to disable mouse click events outside a specific DIV based on a condition?

Related searches

I'm using a RAD tool that generates angular code, and I want to make some modifications to a specific behaviour.

I have a grid and I can enter "edit" mode for a specific row with a button click, now once in edit mode, I want to disable completely mouse clicks outside the div containing that grid, because if the users clicks on some components outside the grid, before saving his edit, it will cause some bugs.

So I when the "Edit" button is clicked, I want to stop mouse events outside a specific div, and as soon as the "Save" button is clicked, I want to allow again mouse events everywhere.

I have no code to show, as it would be just some html code with some buttons tags.

The solution I'm looking for is just to know what is the correct way to do this, then I Can implement it by myself

You can do the following thing. Look at the code and find the (click) event and pass the reference of the MouseEvent to this event.


<div (click)="stopEvent($event)"></div>

Then call:

stopEvent(e: MouseEvent) {

Another solution would be to add a disable to the div tag:

<div [disabled]="true"></div>

The Dangers of Stopping Event Propagation, To simply prevent the event from bubbling to ancestor elements but allow other event to the top of the document, it is not possible to stop propagation of live events. div {. height: 30px;. width: 150px;. background-color: #cfc;. } </style> DOM Insertion, Around � DOM Insertion, Inside � DOM Insertion, Outside � DOM� Detecting clicks on a component is easy in Angular 2: Just use the (click) event binding, pass a function from the component’s instance and you are done. However, if you need to detect clicks outside of your component, things are getting tricky. You will usually need this for custom implementations of drop-down lists, context menus, … Continue reading Angular 2: A Simple Click Outside

If you pass the event into your method, you can call stopPropagation to prevent it falling through to the elements behind it;


    myMethod(event: any){

Alternatively you can call stopPropagation right on the template

    (click)="myMethod(); $event.stopPropagation()"

You can make this conditional by combining it with whatever variable you have to set edit mode, i.e.

    this.editMode && event.stopPropagation()

event.stopImmediatePropagation(), Get code examples like "javascript detect click outside element" instantly right how to change a condition when user click out of particular area in html Binding Specific Keys to the Keyup and Keydown Events � angular random array reduce and count based on proeperty js � array remove element js� Mouse Events. Mouse events occur when the cursor moves over an element, in this order: ng-mouseover; ng-mouseenter; ng-mousemove; ng-mouseleave ; Or when a mouse button is clicked on an element, in this order: ng-mousedown; ng-mouseup; ng-click; You can add mouse events on any HTML element.

If i understood, you want to stop propagation only outside the div... So if you click in div, the click has effects; else the propagation will stopped. You need to use HostListener (here the official documentation

Try in this way:

<div #myDIVName (click)="stopEvent($event)"></div>

and in your component, declare a variable with the ViewChild decorator

@ViewChild('myDIVName') myDIVName;

and add this function

@HostListener('document:click', ['$event'])
  public onClick(event) {
    try {
      if (this.disableOutsideClick &&   !this.myDIVName.nativeElement.contains( {
    } catch (e) {

javascript detect click outside element Code Example, Open a Dialog on condition It can also be closed by clicking outside of the dialog using hide method. EmitType } from '@syncfusion/ej2-base'; @ Component({ selector: 'app-root', template: `<button class="e-control style=" position: absolute;" id="targetButton" (click)="onOpenDialog($event)">Open Dialog</button> <div� In this blog post, We are going to learn how button click works, get value from input on button click with an eample. Angular Event binding - Button Click Usually, In any angular applications, User clicks on the button for two reasons, One is submit the form and another is navigation from one page to other .

How to Close Dialog when click outside of its region in Angular , An element can be hidden or shown based on if the mouse is clicked outside the A mouseup event is to first checked upon the document. This article will provide example of how to call component function on button click event in angular 9/8 application. i want to show you angular 9/8 button click event and call a function example. it's very simple example of click event call function angular 9/8.

How to hide a div when the user clicks outside of it using jQuery , Definition and Usage. The ng-mouseover directive tells AngularJS what to do when a mouse cursor moves over the specific HTML element.. The ng-mouseover directive from AngularJS will not override the element's original onmouseover event, both will be executed.

Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular.

  • Does this answer your question? Stopping a click event on a div if a condition is met -- Angular 5