focusout on an element conflicting with click on o

Question

I have focusout() event on element1 and click() event on element2, and when element1 goes out of focus because was performed a click event on element2, only focusout is fired, click event is not.

This works fine [on jQuery][1] but not in Angular.

I found a work around by adding a window.setTimeout() which works for angular too. Unfortunately I can not do this.

Another suggestion is much appreciated.

Please find the code with setTimeout:

---

---

$('#txtName').on("focusout",function(event) {
    //Alternate solution required for `setTimeout`.
    window.setTimeout( function() {alert('focus gone');},1000); }); 

    $('#button1').on('click',function(){
       alert('button click');
    }); 
 }

Answer 1

It is a problem with the click event.

A click event consists of 2 events, mousedown and mouseup.

The sequence of events in your case is this

1) mousedown 2) focusout 3) mouseup

Where 1 and 3 make a click event.

This can happen when an additional element, such as an error message is displayed on the page and the button on which the click is supposed to happen, moves from it's original x and y co-ordinates. Hence the mouseup happens on some other place and not where the mousedown had happened.

So basically what I think is that your mousedown works, focusout works but the mouseup does not.

The solution to this is to use mousedown event instead of click. So your click should not wait for mouseup to happen to work.

Example:

<input type="text" (focusout)="someMethod()">
<button (mousedown)="someMethod()">Click Me!</button> //Changed (click) to (mousedown)

Hope this helps.