Question

当屏幕尺寸低于768像素时，我试图阻止事件发生。

当用户点击链接时，电子邮件注册表单应该从画布外弹出，但是在768px及以下的屏幕上，联系表单在主要联系人的底部保持静止。

无论我尝试过什么，我都无法阻止事件发生或其他一些奇怪的行为，因此我的代码明显存在问题。

我已经CodePen example来表明问题...

JS

( function($) {

    var config = {};

    config.window = $(window);
    config.wWidth = config.window.width();
    config.wHeight = config.window.height();

    $(document).ready(function () {

        $(".no-svg img").each(function () {
            this.src = this.src.replace(".svg", ".png");
        });

        resizeWindow();

    });

    $(window).resize(resizeWindow);

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

    if ( !Modernizr.touch && config.wWidth > 768 ) {
        buildCanvas();
      }
    }

    function buildCanvas() {

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

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

       e.preventDefault;

            var $this = $(this);

            $container.toggleClass('active');

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

                TweenMax.to($container, 0.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();
            }
        });
    }

})(jQuery);

Answer 1

首先想到的是你将一个事件处理程序挂钩到一个尚未声明的函数：

$(document).ready(function () {

    $(".no-svg img").each(function () {
        this.src = this.src.replace(".svg", ".png");
    });

    resizeWindow();

});

$(window).resize(resizeWindow); // This line here

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

if ( !Modernizr.touch && config.wWidth > 768 ) {
    buildCanvas();
  }
}

将引用块中的标记行移动到启动器的文档就绪函数中。：）

$(document).ready(function () {
    $(".no-svg img").each(function () {
        this.src = this.src.replace(".svg", ".png");
    });

    $(window).resize(resizeWindow); // This line here
    resizeWindow();
});

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

  if (!Modernizr.touch && config.wWidth > 768) {
    buildCanvas();
  }
}

Answer 2

这太奇怪了。我从你的代码中得到了很多行为。

我评论说：

$(window).resize(resizeWindow);

并改变了

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

到

$('.email-signup__title').on('click', function(e) {

这样它就不会在div内部的点击切换活动类，并且它以某种方式工作。我还在试图找出原因。但如果您没有时间进行调查，请尝试我的解决方案。

防止某些屏幕宽度的javascript事件触发

2 个答案: