首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >检测窗口宽度更改,但不检测高度更改

检测窗口宽度更改,但不检测高度更改
EN

Stack Overflow用户
提问于 2012-05-25 15:52:54
回答 4查看 79.2K关注 0票数 47

我使用.resize()函数来检测窗口大小调整事件,但它同时检测高度和宽度的变化。

有没有办法只检测宽度变化的,而不检测高度变化的

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2012-05-25 16:06:17

var width = $(window).width();
$(window).on('resize', function() {
  if ($(this).width() !== width) {
    width = $(this).width();
    console.log(width);
  }
});
票数 95
EN

Stack Overflow用户

发布于 2016-02-05 22:53:49

尽管已经有几个有效解决方案的答案,但这类任务对性能至关重要(当用户调整窗口大小时,窗口大小调整事件会触发多次),因此我强烈建议您关注性能。请看下面优化后的代码:

/* Do not waste time by creating jQuery object from window multiple times.
 * Do it just once and store it in a variable. */
var $window = $(window);
var lastWindowWidth = $window.width();

$window.resize(function () {
    /* Do not calculate the new window width twice.
     * Do it just once and store it in a variable. */
    var windowWidth = $window.width();

    /* Use !== operator instead of !=. */
    if (lastWindowWidth !== windowWidth) {
        // EXECUTE YOUR CODE HERE
        lastWindowWidth = windowWidth;
    }
});

此外,您可能会对检查Debounce / Throttle模式感兴趣-在这样的情况下,它们会极大地提高性能。

票数 5
EN

Stack Overflow用户

发布于 2015-12-14 22:04:06

你也可以使用这个小的jQuery插件:https://github.com/adjohnson916/jquery-resize-dimension

使您自己的代码更具可读性:

ResizeDimension.bind('width');
$(window).on('resize-width', function () {
  console.log('resize-width event');
});

或者只是:

$(window).resizeDimension('width', function () {
  console.log('resize-width event');
});
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/10750603

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档