CODEWITHSUNDEEP
javascripthtmlangularjsui-select
user656449
user656449

Reputation: 3032

Find element under click causing blur

Is there any way to find out element the click causing blur even was made over?

I need to have value of a ui-select set to what user has typed in when he clicks outside of the dropdown. But when he clicks on the dropdown item the input should be discarded and item selected. So I should understand where was the mouse when user clicked outside ui-select's input. I tried 

element.find('input').on('blur', function (e) {
       e.target  
  ...
 });

but target always points to the

input.form-control.ui-select-search.ng-valid.ng-touched.ng-dirty.ng-valid-parse

The

Get element currently under mouse without using mouse events

always finds highlighted dropdown item ad

Determine which element the mouse pointer is on top of in Javascript

doesn't work as I can't any of the DOM X/Y properties.

Any ideas?

ps: no jquery.

Upvotes: 0

Views: 870

Answers (1)

Ito Pizarro
Ito Pizarro

Reputation: 1607

On focus of the input, set a click eventListener on the root document element that:

  1. Identifies the element that received the click (the event.target, similar to your use above)
  2. for/while loops through the event.target and all its parents (all the way up the DOM tree), looking for a match [of the "original" focused <input>]

If neither the element.target nor any of the parent/ancestors match, you found the element. Whether you return the match or not, you'll want to remove that eventListener when the handler is done.

Upvotes: 1

Related Questions