避免模糊事件的完美方法

Question

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

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

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

if(style!='none')

这解决了我的问题，但是在这里写这个问题的目的是为了找到一个好的和有效的方法来处理这个问题？

Answer 1

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

Answer 2

听起来您已经解决了问题，但正在寻找替代方案。不幸的是，除了在进行计算之前检查可见性之外，您真的没有什么可以做的。

您可能只想在模糊事件中添加检查，如果您还没有的话：

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
  }

避免模糊事件的完美方法

Perfect way to avoid blur event

html

javascript

css

onblur

dom-events

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

Perfect way to avoid blur event

html

javascript

css

onblur

dom-events

避免模糊事件的完美方法