0

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.

Community
  • 1
  • 1
user656449
  • 2,950
  • 2
  • 30
  • 43
  • Please try to replicate the scenario using jsbin, jsfiddle... – Gangadhar Jannu Jul 12 '16 at 08:36
  • You've tagged this with angularjs, it's perhaps worth looking at ng-blur? https://docs.angularjs.org/api/ng/directive/ngBlur – robstarbuck Jul 12 '16 at 09:28
  • On `focus` of the input, set an `click` eventlistener on the root `document` element that first, identifies the element that received the click (the `event.target`, similar to your use above), then `for`/`while` loop through the `event.target` and all its parents (all the way up the DOM tree), looking for a match [of the "original" focused ``]. 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 probably want to remove that eventListener when the handler is done. – Ito Pizarro Jul 12 '16 at 10:07
  • Thank you Ito Pizarro! That's probably the way to go - I was thinking about adding click (or maybe better mousedown) listener to the dropdown items (but they're added to dom dynamically) and forgotten that I can add it to parent elt and use event.target. – user656449 Jul 12 '16 at 10:46
  • No problem! I really _should_ have submitted that as an answer so it's easier for anyone else to find. I'm fixing that now… – Ito Pizarro Jul 12 '16 at 13:49

1 Answers1

1

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.

Ito Pizarro
  • 1,607
  • 1
  • 11
  • 21