Question

我遇到了一个奇怪的问题 - 访问任何DOM元素的outerHeight，或者只是在模糊事件中将该元素登录到浏览器的控制台似乎取消导致模糊的点击事件 - 当满足一些特殊标准时。

这是我想要做的事情：

有2个输入，第一个是最初可见的，另一个是隐藏的
当第一个输入获得焦点时，将显示第二个输入
当第二个输入获得焦点时，它仍会显示
当两个输入都失去焦点，并且没有一个被聚焦时，第二个输入将被隐藏

然而，似乎当我在模糊事件处理程序中尝试执行类似$('body')[0].outerHeight的操作时，第二个输入永远不会收到点击或焦点。由于简单地写下来太过分了，所以这里有一个指向JSFiddle的链接来说明问题：http://jsfiddle.net/7K2Ha/3/

注意 - 它与普通的JS

任何人都可以解释为什么会发生这种情况并且有办法解决这个问题吗？

Answer 1

首先，将焦点/模糊事件绑定到所有 .jq输入。然后添加下一个事件处理程序（这意味着所有这些都将被执行 - 包括第一个删除has-focus类的事件）。

检查这个小提琴，第20行：fiddle here。

$('#input3').unbind('blur').on('blur', //...

Answer 2

问题并非特定于offsetHeight，我相信如果您注释掉该行，则仅仅因为浏览器不会出于性能/优化器原因而调用空函数块而无法获得效果。

似乎归结为事件的执行顺序（特别是在连接了多个相同类型的jquery事件时会出现问题）。看看当你连接模糊/鼠标悬停等时会发生什么。所有$('input.jq')个元素在最后都有共同点的事件：http://jsfiddle.net/7K2Ha/6/

我所做的只是将最顶层的javascript块移到底部，突然它起作用了。在这种情况下，focus事件似乎发生在blur事件之前。请注意在focus之前永远不会被调用的方式。

作为一个更强大的解决方案，我只使用一个涵盖两者的事件：

$('input.jq')
.on('focus', function() {
    // get focus'ed elements parent
    var thisParent = $(this).parent('div')
    thisParent.addClass('has-focus');

    // get all other parents 
    var otherParents = $('input.jq').parent('div').not(thisParent);
    otherParents.removeClass('has-focus');
})

请参阅updated JSfiddle。

（为什么）访问outerHeight取消click / mouseup / focus事件？

2 个答案: