Question

我在我的页面上添加了一个windows resize事件每当页面大小改变时都会调用它。

但是当我使用jquery css更新页面内部div元素的css值并动画时，它会自动触发windows resize事件。

这仅适用于IE

我希望通过animate或css方法阻止resize事件在手动更改大小时执行

这是我的代码

用于调整窗口大小

window.onresize=function(){ ... };

用于div大小更改

$('div#divtest').css({ 'position': 'absolute', 'z-index': '1', 'background-color': '#f6f6f6' }).animate({
                    width: '20%', 
                    height : $('div#divother').height() - 29
                }, 0);

修改我不想在调整大小事件中做任何更改，因为它是页面明智的不同所以我必须在所有现有事件中进行更改

我可以暂时关掉它

Answer 1

您可以通过以下方式实现此目的：

在应用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;
    ... 

};

Answer 2

最后我解决了这个问题。感谢vijayP的旗帜建议。但是我没有在每个resize函数中放置标志，而是覆盖window.onresize函数

我在母版页脚本/通用脚本中添加以下代码

(function($) {
        var oldresize = window.onresize;

        window.onresize = function() {
            if (CallPageResize)
                return oldresize.call(this);
        };
    })(jQuery);

其中CallPageResize为flag，其值设置如下

CallPageResize = false; $('div#divtest').css({ 'position': 'absolute', 'z-index': '1', 'background-color': '#f6f6f6' }).animate({
            width: '20%',
            height: $('div#divother').height() - 29
        }, 0);
        CallPageResize = true;

Answer 3

为避免不必要的窗口调整大小事件，请比较之前的窗口宽度和高度，如果宽度或高度不同，则继续执行窗口调整大小事件。这只是一种解决方案。

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
..................................
}

使用jquery更改css属性时，防止触发windows resize事件

3 个答案: