Finding a way to detect the mouse leaving two elements simultaneously in Angular4

Question

Finding a way to detect the mouse leaving two elements simultaneously in Angular4

Are you looking for the Angular4 equivalent of a particular jQuery functionality? Do you need to add multiple elements dynamically and are experiencing issues with the settimeout function in Angular4? Any thoughts on how to solve this?

http://jsfiddle.net/pFTfm/195/

            var count = 0;
            var tolerance = 500;
            $('#d1, #d2').mouseenter(function(){
                count++;
                $('#d3').show();
            }).mouseleave(function(){
                count--;
                setTimeout(function () {
                    if (!count) {
                    $('#d3').hide();
                    }
                }, tolerance);
            });

in angular

isMouseEnter(e:number){
    this.dropdownId = e;
    this.toogleDropdown = true;

}

hideDropdown(){
    setTimeout(() => {
        if(!this.overElement){
            this.toogleDropdown = false;
        }
        else{
            this.toogleDropdown = true;
        }
    }, 100);

}

angular typescript

Answer 1

Answer №1

Take a look at the live code example here

HTML Code

 <div id="d1" (mouseenter)="mouseEnter('A')" (mouseleave)="mouseLeave('A')">div 1</div>
<div id="d2" (mouseenter)="mouseEnter('B')" (mouseleave)="mouseLeave('B')">div 2</div>
<div id="d3" [ngClass] ="{'hideDiv': div3}">
  div 3
</div>

CSS Styling

   p {
  font-family: Lato;
}
#d1 {
    width: 250px;
    height: 200px;
    background: red;
    display: block;
}

#d2 {
    width: 250px;
    height: 200px;
    background: blue;
    position: absolute;
    top: 150px;
    left: 150px;
    display: block;
}

#d3 {
    position: absolute;
    top: 400px;
    background: green;
    width: 100px;
    height: 100px;
}
.hideDiv {
  display: none;
}

TypeScript Component Logic

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
 div3: boolean = true;
  
  public mouseLeave(type) {
      if(type == 'A' || type == 'B') {
        this.showDiv(true);
      }
  }

  public mouseEnter(flag) {
    if(flag == 'A' || flag == 'B') {
        this.showDiv(false);
      }
  }

  public showDiv(flag) {
    setTimeout(() => {
      this.div3 = flag;
        }, 100);
  }
}

Thank you for checking out the example!

Answer 2

Take a look at the live code example here

HTML Code

 <div id="d1" (mouseenter)="mouseEnter('A')" (mouseleave)="mouseLeave('A')">div 1</div>
<div id="d2" (mouseenter)="mouseEnter('B')" (mouseleave)="mouseLeave('B')">div 2</div>
<div id="d3" [ngClass] ="{'hideDiv': div3}">
  div 3
</div>

CSS Styling

   p {
  font-family: Lato;
}
#d1 {
    width: 250px;
    height: 200px;
    background: red;
    display: block;
}

#d2 {
    width: 250px;
    height: 200px;
    background: blue;
    position: absolute;
    top: 150px;
    left: 150px;
    display: block;
}

#d3 {
    position: absolute;
    top: 400px;
    background: green;
    width: 100px;
    height: 100px;
}
.hideDiv {
  display: none;
}

TypeScript Component Logic

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
 div3: boolean = true;
  
  public mouseLeave(type) {
      if(type == 'A' || type == 'B') {
        this.showDiv(true);
      }
  }

  public mouseEnter(flag) {
    if(flag == 'A' || flag == 'B') {
        this.showDiv(false);
      }
  }

  public showDiv(flag) {
    setTimeout(() => {
      this.div3 = flag;
        }, 100);
  }
}

Thank you for checking out the example!

Answer 3

Answer №2

One way to handle this situation is by utilizing the @HostListener method and utilizing the $event.target property to distinguish between the two elements:

@HostListener('mouseleave', ['$event.target'])
onLeave(): void {
  // Utilize the $event.target to distinguish between elements and perform
  // specific actions accordingly.
}

Answer 4

One way to handle this situation is by utilizing the @HostListener method and utilizing the $event.target property to distinguish between the two elements:

@HostListener('mouseleave', ['$event.target'])
onLeave(): void {
  // Utilize the $event.target to distinguish between elements and perform
  // specific actions accordingly.
}

Finding a way to detect the mouse leaving two elements simultaneously in Angular4

Answer №1

Answer №2

Similar questions

The Typescript compiler will continue to generate JavaScript code even if there are compilation errors

Error in Angular: Trying to access property 'setLng' of a null component variable

Steps for Subscribing to a Component Event with a Directive

What is the reason behind Angular's repeat filter only being able to access its own element within the return function?

The storybook is struggling to find the correct builder for the Angular project

Unable to access structuredClone on the global object within a Node.js application

The Nativescript mobile build can encounter issues if TypeScript file imports do not use correct paths

Adding information to a table using React

Angular 2: The ngOnInit method will be executed after attempting to render the template when initiating from a URL containing an identifier

The error message "indexOf of undefined" appears when trying to read a property that does not exist within a new

Angular drag and drop functionality combined with interactive buttons for list management

Managing time in an Angular application using Typescript

Navigating to a different page rather than a component in Angular

Steps to simulate a TouchEvent programmatically using TypeScript

Looking for a solution to resolve the issue "ERROR TypeError: Cannot set property 'id' of undefined"?

The function will continuously run in a loop when utilized within an HTML template

The expression has been modified following a review with the @ViewChild reference

Troubleshooting Angular4 and TypeScript Compile Error TS2453: A Comprehensive

Encountered a problem with NGX Infinite Scroll while implementing it in my Angular project

Initiating worldwide actions for a "loading" element, like with Angular 1's $emit function