仅在调整窗口宽度大小时调用 jquery 函数
Call jquery function only when window width gets resized
>我有一个函数responsive
可以改变我网站上某些元素的行为,包括隐藏弹出窗口等。我在两种情况下调用它:
$(document).ready(responsive);
$(window).resize(responsive);
问题发生在android chrome上,因为虚拟键盘实际上改变了屏幕的高度,并触发了responsive
功能,该功能会关闭我的弹出窗口(其中一些具有文本字段,因此无法输入)。
如何防止这种情况发生?我在某处读到一个很好的观点,即 android 虚拟键盘只会改变屏幕的高度,而不是宽度,所以我认为在调整大小之前和之后比较宽度是个好主意。所以我创建了这个函数来比较前后的宽度,如果宽度不同,resize()
运行,但它没有按预期工作,控制台日志显示不同的文档宽度,即使我只更改了屏幕的高度(使用 chrome 开发人员工具)。
知道出了什么问题,或者我怎样才能防止功能responsive
在高度变化时启动?
function resizeWidth() {
var existingWidth = $(document).width();
$(window).resize(function() {
var newWidth = $(document).width();
if (existingWidth != newWidth) {
$(window).resize(responsive);
console.log(existingWidth);
console.log(newWidth);
};
});
};
$(window).resize(resizeWidth);
首先,您将处理程序多次
附加到resize
事件。一个在加载时,然后在每次调整大小并调用resizeWidth
时另一个。应删除该函数中的处理程序。另外,我想您只想调用 responsive()
函数,而不是在宽度更改时附加另一个调整大小处理程序。
您遇到的主要问题是existingWidth
的范围不够低,无法在多个事件中看到它。你可以把它变成全球性的,尽管这通常被认为是不好的做法。相反,您可以使用 data
属性,如下所示:
function resizeWidth() {
var existingWidth = $(document).data('resize-width');
var newWidth = $(document).width();
if (existingWidth != newWidth) {
responsive();
$(document).data('resize-width', newWidth);
};
};
$(window).resize(resizeWidth);
相关文章:
- 内部分区字体大小获胜'调整浏览器窗口大小时不会随媒体查询而更改
- 如何使jQuery插件函数可调用以供独立使用,而不在集合上操作
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 调整窗口大小时,可拖动的对象会出现在容器外部
- 如何从Java/scala调用js美化程序
- 如何调用这个匿名 JavaScript 函数
- 如何从模块链中调用函数.导出到节点中
- 我需要从php调用javascript或jquery
- Chrome开发工具(如何知道我在调用哪个javascript对象)
- 单击按钮后如何逐个调用分区,上一个分区将隐藏
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- Twitter Bootstrap typeahead:使用“this”获取上下文/调用元素
- 递归 - 测试最大堆栈大小时,调用堆栈无法弹出
- 如何每小时调用一次函数
- 仅在调整窗口宽度大小时调用 jquery 函数
- 在自身内部调整大小时调用函数时滞后
- 如何在javascript中完成24小时后调用面板
- 如何在 Ext js 4.0 中调整网格大小时调用函数
- 当从客户端从ajax调用检索时,我在服务器上的日期时间增加了12.30小时
- 如何每小时自动调用javascript函数