jquery 和 $(window).resize 函数无限循环
Unlimited loop with jquery and $(window).resize function
我想为移动用户制作一个自动滚动以聚焦功能,这样他们就不会再遇到有时与输入重叠的键盘问题。
->如果有人点击输入页面向下滚动到这个,-64px 因为固定导航。
我的问题是,例如,如果平板电脑用户将视图从横向更改为纵向,则该功能无法工作,因为我设置了:
if ($( window ).width() <= 1250) {});
所以我做了一个这样的调用函数:
$(window).resize(function() {
resizeFix();
});
但问题是它在改变 window 宽度后无限循环。
全部代码:
$(document).ready(function(){
resizeFix = function() {
if ($( window ).width() <= 1250) {
$('input[type=text], input[type=checkbox], input[type=password], textarea').focus(function() {
$('html, body').animate({
scrollTop: $('input:focus, textarea:focus').offset().top - 64
}, 500);
});
};
};
resizeFix();
$(window).resize(function() {
resizeFix();
});
});
编辑:我已经试过了:
$(window).resize(function() {
if ($( window ).width() <= 1250) {
resizeFix();
});
});
发生这种情况是因为在每个调整大小事件中,您都为每个元素的焦点附加了一个新的事件侦听器。你只想要 一个。因此,例如,使用布尔值跟踪它。 (你实际上在做的是跟踪函数 resizeFix 是否已经被触发。)为了确保当你重新缩放到 > 1250 时监听器不会再次触发,你可以调用 off()
.
$(document).ready(function() {
var listenerAttached = false;
var resizeFix = function() {
var w = $(window).width();
if (!listenerAttached && w <= 1250) {
$('input[type=text], input[type=checkbox], input[type=password], textarea').on("focus", function() {
$('html, body').animate({
scrollTop: $('input:focus, textarea:focus').offset().top - 64
}, 500);
});
listenerAttached = true;
} else if (listenerAttached && w > 1250) {
$('input[type=text], input[type=checkbox], input[type=password], textarea').off("focus");
listenerAttached = false;
}
};
resizeFix();
$(window).resize(function() {
resizeFix();
});
});
我想为移动用户制作一个自动滚动以聚焦功能,这样他们就不会再遇到有时与输入重叠的键盘问题。
->如果有人点击输入页面向下滚动到这个,-64px 因为固定导航。
我的问题是,例如,如果平板电脑用户将视图从横向更改为纵向,则该功能无法工作,因为我设置了:
if ($( window ).width() <= 1250) {});
所以我做了一个这样的调用函数:
$(window).resize(function() {
resizeFix();
});
但问题是它在改变 window 宽度后无限循环。
全部代码:
$(document).ready(function(){
resizeFix = function() {
if ($( window ).width() <= 1250) {
$('input[type=text], input[type=checkbox], input[type=password], textarea').focus(function() {
$('html, body').animate({
scrollTop: $('input:focus, textarea:focus').offset().top - 64
}, 500);
});
};
};
resizeFix();
$(window).resize(function() {
resizeFix();
});
});
编辑:我已经试过了:
$(window).resize(function() {
if ($( window ).width() <= 1250) {
resizeFix();
});
});
发生这种情况是因为在每个调整大小事件中,您都为每个元素的焦点附加了一个新的事件侦听器。你只想要 一个。因此,例如,使用布尔值跟踪它。 (你实际上在做的是跟踪函数 resizeFix 是否已经被触发。)为了确保当你重新缩放到 > 1250 时监听器不会再次触发,你可以调用 off()
.
$(document).ready(function() {
var listenerAttached = false;
var resizeFix = function() {
var w = $(window).width();
if (!listenerAttached && w <= 1250) {
$('input[type=text], input[type=checkbox], input[type=password], textarea').on("focus", function() {
$('html, body').animate({
scrollTop: $('input:focus, textarea:focus').offset().top - 64
}, 500);
});
listenerAttached = true;
} else if (listenerAttached && w > 1250) {
$('input[type=text], input[type=checkbox], input[type=password], textarea').off("focus");
listenerAttached = false;
}
};
resizeFix();
$(window).resize(function() {
resizeFix();
});
});