Blur(unfocus) an element when other element is clicked

Question

document.addEventListener("click", function (e) {
var filter = document.getElementById('filter');
  if (e.target !== filter[0]) {
    filter.blur();
  }
});

My attempt ^^

jQuery Code:

$(document).on('click', function(e) { 
  if (e.target !== $('#filter')[0]) 
  $('#filter').blur();
});

When any element except #filter is clicked I would like to blur (unfocus) #filter

This wasn't working and I was wondering how to make it work.. — jaksco, Jun 19 '14 at 06:32
He's obviously trying to convert the jQuery code to Javascript. Read the title. — fbynite, Jun 19 '14 at 06:33
Did you do any basic debugging to find out what was happening in your event handler (whether it was getting called, whether the `if` condition was getting satisfied and if not, why not)? — jfriend00, Jun 19 '14 at 06:34
@jfriend00, your changes were un-done by ejay_francisco...Did you see that? — fbynite, Jun 19 '14 at 06:38

score 2 · Accepted Answer · answered Jun 19 '14 at 06:31

You don't need to dereference the result of getElementById with the [0] - the result is already a single element.

The [0] is only necessary in jQuery because jQuery results are always pseudo-arrays even if there's only one matching element.

Given this function is being called for every single click on the page, consider moving the definition of filter outside of the function so that you don't have to re-evaluate it for every click (assuming that the element is static).

Blur(unfocus) an element when other element is clicked

1 Answers1

Linked