防止特定屏幕宽度的javascript事件触发

我试图防止屏幕大小低于768px时触发事件

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

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

我做了一个演讲来展示这个问题

JS

---

首先想到的是将事件处理程序连接到尚未声明的函数：

$(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函数，以供初学者使用：

$(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();
  }
}

---

这太奇怪了。我从你的密码笔里了解到很多行为

我评论道：

$(window).resize(resizeWindow);

改变

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

到

---

这样它就不会在div内部的点击时切换活动类，而且它不知怎么地工作了。我还在想原因。但如果您没有时间调查，请尝试我的解决方案。

编辑了我的答案，以便更准确。这样，弹出仍然不会正常发生，但当窗口宽度小于阈值时，代码将对窗口大小调整做出反应，并且实际上表现不同。修改了。。。该事件仍然针对较小的屏幕触发。我对这个感到困惑。我过去使用过这种技术，但成功率更高。事件仍然在比768px小的屏幕上启动。我很抱歉，为什么不在检查屏幕大小后手动创建并启动事件？@IazertyuiopI我最终解决了这个问题。我最终使用了事件授权，这对我来说是一件新鲜事。

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

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