Best way to check JavaScript object's value if object may be undefined

Question

I have a textarea that I have a blur event attached to. I don't want the blur event to run if the user clicks on a specific span.dontClick on the page. However if the user clicks on anything other than the span.dontClick I do want the blur event to run. I have found a way to do this, but it looks awful, feels very hackey, and I'm guessing there is a better solution out there. Here's what I've come up with:

if (event.type === 'focusout') {
  if (
    typeof event.originalEvent !== 'undefined' &&
    typeof event.originalEvent.currentTarget !== 'undefined' &&
    typeof event.originalEvent.currentTarget.activeElement !== 'undefined' &&
    typeof event.originalEvent.currentTarget.activeElement.className !== 'undefined' &&
    event.originalEvent.currentTarget.activeElement.className === 'dontClick'
  ) {
    // abort the code for the blur event (in effect, do nothing)
  }
  else {
    // run code for when a user blurs by not clicking on span
  }

It should probably be noted that the event object is from a jQuery event handler. I'm not sure if it is different or the same as the native event objects.

It should also be noted that this fails silently for most browsers but I get a debug window in IE if I don't specify the 'undefined' state for each object all the way down the line...

If anyone has a more elegant solution I would really appreciate seeing it. Thanks!

This is one of the biggest reasons why I love CoffeeScript :) — Alex Wayne
– Alex Wayne, Commented Oct 31, 2012 at 21:20

I Hate Lazy · Accepted Answer · 2012-10-31 21:22:28Z

7

You don't need comparisons to undefined. Just do a truthy test. Also the test for the className isn't needed. The === comparison will cover it.

 if (
    event.originalEvent &&
    event.originalEvent.currentTarget &&
    event.originalEvent.currentTarget.activeElement &&
    event.originalEvent.currentTarget.activeElement.className === 'dontClick'
  ) {

but then you're doing more work than needed anyway since jQuery gives you a reliable currentTarget.

 if (
    event.currentTarget.activeElement &&
    event.currentTarget.activeElement.className === 'dontClick'
  ) {

or if you're in a handler, just use this.

 if (this.activeElement && this.activeElement.className === 'dontClick') {

answered Oct 31, 2012 at 21:22

I Hate Lazy

49k13 gold badges89 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

jasonmerino Over a year ago

I'm not seeing any activeElement object under event.currentTarget, plus, if I'm thinking clearly about this, the reason I'm checking event.originalEvent.currentTarget.activeElement.className is because I need to see if a user clicked on the span originally. If it existed, wouldn't event.currentTarget.activeElement refer to the textarea?

I Hate Lazy Over a year ago

@jasonmerino: Yes, the correct property is document.activeElement, and it would refer to the textarea. I wasn't sure why you were checking it for the class of the span. You could put a handler on the span.dontClick, but by the time it fires, the blur will have already fired. Perhaps the only way would be to have the blur event code in a short setTimeout, then have a click event on the span.dontClick set some global variable that the blur event can check before it invokes its code.

jasonmerino Over a year ago

Yeah, I could set a timer, but to me that feels even more hackey than my current solution... :S

I Hate Lazy Over a year ago

@jasonmerino: Yeah, it's pretty hackey, but it's tough to get around the fact that events happen in a certain order.

Collectives™ on Stack Overflow

Best way to check JavaScript object's value if object may be undefined

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related