Styjun

Why is the UH-60 tail rotor canted?

Why does the salt in the oceans not sink to the bottom?

Has Peter Parker ever eaten bugs?

What is a "staved" town, like in "Staverton"?

Wiring IKEA light fixture into old fixture

Is an easily guessed plot twist a good plot twist?

Pgfplots fillbetween and Tikz shade

Why do people say "I am broke" instead of "I am broken"?

Killing a star safely

Why can't a country print its own money to spend it only abroad?

My current job follows "worst practices". How can I talk about my experience in an interview without giving off red flags?

Grid puzzle solutions

Is it possible to access the complete command line including pipes in a bash script?

Why did NASA use Imperial units?

What is a plausible power source to indefinitely sustain a space station?

What kind of curve (or model) should I fit to my percentage data?

How to Sow[] until I've Reap[]'d enough?

Is the apartment I want to rent a scam?

Considerations when providing money to one child now, and the other later?

Is it ethical to tell my teaching assistant that I like him?

How to apply dcolumn in my longtable case? Need help

What does a black-and-white Puerto Rican flag signify?

ExactlyOne extension method

How does mathematics work?

Angular 2+ - How to combined mouseover, mouseout and click events on the same element?

jQuery mouseover invoking a clickjQuery accordion navigation with mouseover/mouseoutMouseover - mouseout - JavascriptHow can I create an exception for a jquery mouseout event only if another mouseover event hasn't been triggered?jQuery-Keep slidedown DIV visible if mouseover itundesired side effect with a mouseover eventAdd click event to child by selecting parent with dynamically added classbackbone.js - mouseover kills events on viewsjQuery fire mouseover event one by oneBrowser handling mouseover event for touch devices causes wrong click event to fire

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

I'm trying to implement a navigation link functionality where if the user mouseover it opens up and if the user mousesout, then it closes. But also if the user clicks on the link then it toggles it. The issue I have is the events conflict with one another and it causes flickering of the nav dropdown. The click toggle closes it, but at the same time the mouse is hovering over it which indicates to open.

real life example - https://www.td.com/ca/en/personal-banking/ - the way "products" or "solutions" work in the nav.

angular forms click mouseover

share|improve this question

asked Mar 26 at 14:29

user1380431user1380431

1711 silver badge66 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Use mouseenter instead.
  
  – ritaj
  Mar 26 at 14:47
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks! that fixed it :)
  
  – user1380431
  Mar 26 at 15:37
  

  
  
  
  

add a comment | 

0

I'm trying to implement a navigation link functionality where if the user mouseover it opens up and if the user mousesout, then it closes. But also if the user clicks on the link then it toggles it. The issue I have is the events conflict with one another and it causes flickering of the nav dropdown. The click toggle closes it, but at the same time the mouse is hovering over it which indicates to open.

real life example - https://www.td.com/ca/en/personal-banking/ - the way "products" or "solutions" work in the nav.

angular forms click mouseover

share|improve this question

asked Mar 26 at 14:29

user1380431user1380431

1711 silver badge66 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Use mouseenter instead.
  
  – ritaj
  Mar 26 at 14:47
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks! that fixed it :)
  
  – user1380431
  Mar 26 at 15:37
  

  
  
  
  

add a comment | 

I'm trying to implement a navigation link functionality where if the user mouseover it opens up and if the user mousesout, then it closes. But also if the user clicks on the link then it toggles it. The issue I have is the events conflict with one another and it causes flickering of the nav dropdown. The click toggle closes it, but at the same time the mouse is hovering over it which indicates to open.

real life example - https://www.td.com/ca/en/personal-banking/ - the way "products" or "solutions" work in the nav.

angular forms click mouseover

share|improve this question

asked Mar 26 at 14:29

user1380431user1380431

1711 silver badge66 bronze badges

angular forms click mouseover

angular forms click mouseover

share|improve this question

asked Mar 26 at 14:29

user1380431user1380431

1711 silver badge66 bronze badges

share|improve this question

asked Mar 26 at 14:29

user1380431user1380431

1711 silver badge66 bronze badges

asked Mar 26 at 14:29

user1380431user1380431

1711 silver badge66 bronze badges

asked Mar 26 at 14:29

user1380431user1380431

1711 silver badge66 bronze badges

1 Answer
1

active

oldest

votes

1

1. You should use mouseenter and mouseleave instead of your events so they won't not trigger on nested tags.


2. I would suggest to make an Observable of openness using RxJs's fromEvent and piping all your events into one resulting boolean.

Here, I've made a stackblitz for you showing what I mean by that:
https://stackblitz.com/edit/angular-4ntjhm?file=src%2Fapp%2Fhello.component.ts

Observable part:

 const mouseenter$ = fromEvent(nativeElement, 'mouseenter');
 const mouseleave$ = fromEvent(nativeElement, 'mouseleave');
 const click$ = fromEvent(nativeElement, 'click');

 this.open$ = merge(
 mouseenter$.pipe(mapTo(true)),
 mouseleave$.pipe(mapTo(false)),
 click$.pipe(mapTo(null)),
 ).pipe(
 scan((acc, current) => current === null ? !acc : current, false),
 startWith(false),
 distinctUntilChanged(),
 );

Basically you map enter to true and leave to false and on click you toggle the previous value.

share|improve this answer

edited Mar 26 at 15:26

answered Mar 26 at 14:59

pokrishkapokrishka

1,23444 gold badges1313 silver badges2727 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks! works now, my issue was the mouseenter and mouseleave
  
  – user1380431
  Mar 26 at 15:36
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55359611%2fangular-2-how-to-combined-mouseover-mouseout-and-click-events-on-the-same-el%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

1. You should use mouseenter and mouseleave instead of your events so they won't not trigger on nested tags.


2. I would suggest to make an Observable of openness using RxJs's fromEvent and piping all your events into one resulting boolean.

Here, I've made a stackblitz for you showing what I mean by that:
https://stackblitz.com/edit/angular-4ntjhm?file=src%2Fapp%2Fhello.component.ts

Observable part:

 const mouseenter$ = fromEvent(nativeElement, 'mouseenter');
 const mouseleave$ = fromEvent(nativeElement, 'mouseleave');
 const click$ = fromEvent(nativeElement, 'click');

 this.open$ = merge(
 mouseenter$.pipe(mapTo(true)),
 mouseleave$.pipe(mapTo(false)),
 click$.pipe(mapTo(null)),
 ).pipe(
 scan((acc, current) => current === null ? !acc : current, false),
 startWith(false),
 distinctUntilChanged(),
 );

Basically you map enter to true and leave to false and on click you toggle the previous value.

share|improve this answer

edited Mar 26 at 15:26

answered Mar 26 at 14:59

pokrishkapokrishka

1,23444 gold badges1313 silver badges2727 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks! works now, my issue was the mouseenter and mouseleave
  
  – user1380431
  Mar 26 at 15:36
  

  
  
  
  

add a comment | 

1

1. You should use mouseenter and mouseleave instead of your events so they won't not trigger on nested tags.


2. I would suggest to make an Observable of openness using RxJs's fromEvent and piping all your events into one resulting boolean.

Here, I've made a stackblitz for you showing what I mean by that:
https://stackblitz.com/edit/angular-4ntjhm?file=src%2Fapp%2Fhello.component.ts

Observable part:

 const mouseenter$ = fromEvent(nativeElement, 'mouseenter');
 const mouseleave$ = fromEvent(nativeElement, 'mouseleave');
 const click$ = fromEvent(nativeElement, 'click');

 this.open$ = merge(
 mouseenter$.pipe(mapTo(true)),
 mouseleave$.pipe(mapTo(false)),
 click$.pipe(mapTo(null)),
 ).pipe(
 scan((acc, current) => current === null ? !acc : current, false),
 startWith(false),
 distinctUntilChanged(),
 );

Basically you map enter to true and leave to false and on click you toggle the previous value.

share|improve this answer

edited Mar 26 at 15:26

answered Mar 26 at 14:59

pokrishkapokrishka

1,23444 gold badges1313 silver badges2727 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks! works now, my issue was the mouseenter and mouseleave
  
  – user1380431
  Mar 26 at 15:36
  

  
  
  
  

add a comment | 

1. You should use mouseenter and mouseleave instead of your events so they won't not trigger on nested tags.


2. I would suggest to make an Observable of openness using RxJs's fromEvent and piping all your events into one resulting boolean.

Here, I've made a stackblitz for you showing what I mean by that:
https://stackblitz.com/edit/angular-4ntjhm?file=src%2Fapp%2Fhello.component.ts

Observable part:

 const mouseenter$ = fromEvent(nativeElement, 'mouseenter');
 const mouseleave$ = fromEvent(nativeElement, 'mouseleave');
 const click$ = fromEvent(nativeElement, 'click');

 this.open$ = merge(
 mouseenter$.pipe(mapTo(true)),
 mouseleave$.pipe(mapTo(false)),
 click$.pipe(mapTo(null)),
 ).pipe(
 scan((acc, current) => current === null ? !acc : current, false),
 startWith(false),
 distinctUntilChanged(),
 );

Basically you map enter to true and leave to false and on click you toggle the previous value.

share|improve this answer

edited Mar 26 at 15:26

answered Mar 26 at 14:59

pokrishkapokrishka

1,23444 gold badges1313 silver badges2727 bronze badges

 const mouseenter$ = fromEvent(nativeElement, 'mouseenter');
 const mouseleave$ = fromEvent(nativeElement, 'mouseleave');
 const click$ = fromEvent(nativeElement, 'click');

 this.open$ = merge(
 mouseenter$.pipe(mapTo(true)),
 mouseleave$.pipe(mapTo(false)),
 click$.pipe(mapTo(null)),
 ).pipe(
 scan((acc, current) => current === null ? !acc : current, false),
 startWith(false),
 distinctUntilChanged(),
 );

share|improve this answer

edited Mar 26 at 15:26

answered Mar 26 at 14:59

pokrishkapokrishka

1,23444 gold badges1313 silver badges2727 bronze badges

answered Mar 26 at 14:59

pokrishkapokrishka

1,23444 gold badges1313 silver badges2727 bronze badges

answered Mar 26 at 14:59

pokrishkapokrishka

1,23444 gold badges1313 silver badges2727 bronze badges