避免模​​糊事件的完美方法

时间:2015-04-19 12:02:27

标签: javascript html css javascript-events onblur

有一个div,它包含输入类型的文本元素,这个div在某些按钮点击时可见,每次输入都会聚焦,div中的输入包含blur事件,在那种情况下它必须执行一些计算。 现在我遇到的问题是当我设置显示没有该div时,它的模糊事件被调用,尽管它是非常合乎逻辑的。

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

我必须避免在其样式属性显示为none时在blur事件中执行的那些计算,因此我将检查模糊事件,即

if(style!='none')

这解决了我的问题,但这里写这个问题的目的是找到一个很好的有效方法来处理这个问题????

2 个答案:

答案 0 :(得分: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
  }

答案 1 :(得分:0)

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