Идеальный способ избежать размытия события

Question

Существует div и он содержит текстовый элемент ввода типа внутри него, этот div становится видимым на некоторых нажатиях кнопок и ввода, которые становятся сфокусированными каждый раз, вход внутри div содержит событие размытия, и в этом случае он должен выполнить некоторые вычисления. Теперь проблема, с которой я столкнулся, - это когда я устанавливаю отображение ни одного из этого div, это событие размытия называется, хотя это очень логично.

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

Я должен избегать тех расчетов, которые выполняются в размытости случае, когда его свойство стиля не является дисплей ни поэтому для этого я поставить галочку в случае размытия т.е.

if(style!='none') 

Это решает мою проблему но Цель написания этого вопроса здесь - найти хороший и эффективный способ справиться с этой проблемой ????

Answer 1

Похоже, что вы уже решили проблему, но ищете альтернативу. К сожалению, на самом деле вы ничего не можете сделать, кроме проверки видимости перед выполнением своих вычислений.

Вы можете просто добавить проверку в вашем случае размытия, если вы еще не:

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

Если по какой-то причине, вы не хотите, чтобы проверить style.display, вы могли бы сделать проверка похожа на JQuery:

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

Answer 2

var x = document.getElementById('btn'); 
if(x.style.display != 'none') 
// do calculations