Perfect way to avoid blur event

Question

There is a div and it contains input type text element inside it, this div gets visible on some button click and input gets focused every time, input inside div contain blur event and in that event it has to perform some calculations. Now problem I am facing is when I set display none of that div its blur event is called although it is very logical.

<div id="main-container">
    <div id="main">
        <input type="text" id="name" />
    </div>
<input type="button" id="btn" value="click me"/> 

I have to avoid those calculations that is performed in blur event when its style property is display none so for this I place a check in blur event i.e.

if(style!='none')

This solves my problem but the purpose of writing this question here is to find a nice and efficient way to handle this problem?

Answer 1

It sounds like you've already solved the problem but are looking for an alternative. Unfortunately, there really isn't much else you can do aside from checking for visibility before doing your calculations.

You might want to just add the check in your blur event, if you haven't already:

var main = document.getElementById( 'main' );
document.getElementById( 'name' ).onblur = function() {
  if( main.style.display != 'none' ) {
    // do calculations
  }
};

If, for whatever reason, you don't want to check the style.display, you could do a check similar to jQuery:

  if( main.offsetWidth > 0 && main.offsetHeight > 0 ) {
    // do calculations
  }