Question

我正在尝试使用基本功能检测窗口宽度，但是，该功能在调整大小时不会更新。

它基本上是一个电子邮件注册表单，在鼠标悬停时从画布上动画。

我不希望在屏幕小于768px时触发事件。

CODE

(function ($) {

    var config = {};

    $(document).ready(function () {

        config.window = $(window);

        // Resize
        $(window).on("resize", function () {
            resizeWindow();
        }).trigger("resize");

        if ( config.wWidth > 768 ) {
            buildCanvas();
        }

        // EMail Signup
        var $container = $('.email-signup__wrap'),
            $cHeight = $('.email-signup').outerHeight();

        function buildCanvas() {

            $('.email-signup__wrap').on('mouseenter mouseleave', function(e) {

                e.preventDefault();
                var $this = $(this);
                $container.toggleClass('active');

                if ($container.hasClass('active')) {

                    TweenMax.to($container, .4, {
                        ease: Power2.easeOut,
                        css:{
                            overflow: 'visible',
                            position: 'absolute',
                            top: -$cHeight
                        }
                    });

                } else {

                    TweenMax.to($container, .4, {
                        ease: Power2.easeOut,
                        css:{
                            position: 'relative',
                            top: 0
                        },
                        onComplete: hide
                    });

                    function hide(){
                        $container.css('overflow', 'hidden');
                    }

                    $("div.mce_inline_error").remove();
                }
            });
        }

        function resizeWindow() {
            config.wWidth = config.window.width();
            config.wHeight = config.window.height();
        }

    });

}(jQuery));

Answer 1

这可能会解决您的问题：

var window_width = 0;
var window_height = 0;

$(document).ready(function(){
        // Calculate the default window width and height
        calculateWindowDimensions();

        // Call the buildCanvas function
        buildCanvas();

        // Calculate the window dimensions on window resize
        $(window).resize(function(){
            calculateWindowDimensions();
            // Call the buildCanvas function
            buildCanvas();
        });
});

function buildCanvas() {
    var $container = $('.email-signup__wrap'),
        $cHeight = $('.email-signup').outerHeight();
    if(window_width > 768){
        // EMail Signup

        $('.email-signup__wrap').on('mouseenter mouseleave', function(e) {
            e.preventDefault();
            var $this = $(this);
            $container.toggleClass('active');
            if ($container.hasClass('active')) {
                TweenMax.to($container, .4, {
                    ease: Power2.easeOut,
                    css:{
                        overflow: 'visible',
                        position: 'absolute',
                        top: -$cHeight
                    }
                });
            } else {
                TweenMax.to($container, .4, {
                    ease: Power2.easeOut,
                    css:{
                        position: 'relative',
                        top: 0
                    },
                    onComplete: hide
                });
                function hide(){
                    $container.css('overflow', 'hidden');
                }
                $("div.mce_inline_error").remove();
            }
        });
    } else {
        // ....
    }
    return false;
}

function calculateWindowDimensions() {
    window_width = $(window).width();
    window_height = $(window).height();
}

您需要使用$(document).ready()或(function($){。使用两者都没有意义。

Answer 2

function myResizeFunction() {
  ...
}

$(function() {
  $(window).resize(myResizeFunction).trigger('resize');
});

这将导致调整大小处理程序在窗口调整大小和文档就绪时触发。当然，如果你想在页面加载时运行.trigger（'resize'），你可以在文档就绪处理程序之外附加调整大小处理程序。

更新：如果您不想使用任何其他第三方库，这是另一种选择。

此技术为您的目标元素添加了一个特定的类，因此您可以通过CSS控制样式（并避免内联样式）。

它还确保仅在触发实际阈值点时添加或删除类，而不是在每次调整大小时。它仅在一个阈值点发射：当高度从＆lt; = 818变为＆gt; 819或反之亦然，而不是每个区域内多次。它并不关心宽度的任何变化。

function myResizeFunction() {
  var $window = $(this),
      height = Math.ceil($window.height()),
      previousHeight = $window.data('previousHeight');

  if (height !== previousHeight) {
    if (height < 819)
      previousHeight >= 819 && $('.footer').removeClass('hgte819');
    else if (!previousHeight || previousHeight < 819)
      $('.footer').addClass('hgte819');

    $window.data('previousHeight', height);
  }
}

$(function() {
  $(window).on('resize.optionalNamespace', myResizeFunction).triggerHandler('resize.optionalNamespace');
});

例如，您可能会将以下内容作为一些CSS规则：

.footer {
  bottom: auto;
  left: auto;
  position: static;
}

.footer.hgte819 {
  bottom: 3px;
  left: 0;
  position: absolute;
}

Answer 3

首先，使用JavaScript检查屏幕分辨率并不是一个好的做法，你有CSS媒体查询。

屏幕宽度为768px及以下的任何设备都可能是触控设备，它实际上没有悬停事件，这是一个点击事件。

话虽如此，

if ( config.wWidth > 768 ) {
    buildCanvas();
}

这段代码的安静应该在'resize'函数内部，因为if语句只在加载页面时只加载一次。 'on'方法没有'resize'属性，请使用'.resize（）'。此外，没有必要创建一个'resizeWindow'函数，因为你只触发一次它并没有让你的代码更清晰。

Answer 4

您可以自己解决，尝试在chrome或firefox中调试它，按 F12 ，启动调试器。
顺便说一句，在chrome / firefox中，您还可以使用以下代码将日志打印到调试器的控制台：

console.log("I am here ...");

调整事件未激活

4 个答案: