防止在使用jquery更改css属性时触发窗口调整大小事件
防止在使用jquery更改css属性时触发窗口调整大小事件
提问于 2016-08-17 19:19:27
我已经在我的页面上添加了一个窗口大小调整事件，每当页面大小改变时都会调用它。
但是，当我使用jquery css更新页面中div元素的CSS值并将其动画化时，会自动触发窗口大小调整事件。
只有IE才会发生这种情况
我想防止在通过动画或css方法手动更改大小时执行调整大小事件
以下是我的代码
用于调整窗口大小
window.onresize=function(){ ... };用于div大小更改
$('div#divtest').css({ 'position': 'absolute', 'z-index': '1', 'background-color': '#f6f6f6' }).animate({
width: '20%',
height : $('div#divother').height() - 29
}, 0);EDIT:我不想在调整事件大小方面做任何更改，原因是页面不同，所以我必须在所有现有事件中进行更改
我有没有可能暂时关掉它
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-09-03 21:16:16
最后我解决了这个问题。感谢vijayP的flag建议。但是我并没有在每个调整大小的函数中放入标志，而是覆盖了window.onresize函数
我在母版页脚本/general脚本中添加了以下代码
(function($) {
var oldresize = window.onresize;
window.onresize = function() {
if (CallPageResize)
return oldresize.call(this);
};
})(jQuery);其中CallPageResize是标志，其值设置如下
CallPageResize = false; $('div#divtest').css({ 'position': 'absolute', 'z-index': '1', 'background-color': '#f6f6f6' }).animate({
width: '20%',
height: $('div#divother').height() - 29
}, 0);
CallPageResize = true;Stack Overflow用户
发布于 2016-08-17 19:28:34
您可以通过以下方式来实现：
在应用css动画之前，请设置如下标志：
$('div#divtest').data("css_animation", true); //set the flag
$('div#divtest').css({ 'position': 'absolute', 'z-index': '1', 'background-color': '#f6f6f6' }).animate({
width: '20%',
height : $('div#divother').height() - 29
}, 0,function() {
// Animation complete.
$('div#divtest').data("css_animation", false); //reset the flag
});在resize中，我们可以检查是否设置了标志，如下所示：
window.onresize=function(){
var flagValue = $('div#divtest').data("css_animation"); //fetch the flag value
//don't do anything if resize is getting called via css animation
if(flagValue === true)
return;
...
};Stack Overflow用户
发布于 2018-05-31 08:53:44
若要避免不必要的窗口大小调整事件，请比较前一个窗口的宽度和高度，如果宽度或高度不同，则继续窗口大小调整事件。这只是一种变通解决方案。
private previousWindowWidth = 0; private previousWindowHeight = 0;
private onWindowResize(): void {
var windowWidth = window.innerWidth;
var windowHt = window.innerHeight;
if (previousWindowWidth === windowWidth && previousWindowHeight ===
windowHt ) {
return;
}
previousWindowWidth = windowWidth ;
previousWindowHeight = windowHt ;
// continue with other operations
..................................
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38995209
复制相关文章
相似问题