如何在屏幕尺寸变化时取消/删除jQuery函数？

你的核心问题是每次屏幕尺寸变化时，重复绑定了点击事件且未在场景切换时移除旧事件，导致之前的事件逻辑始终保留。以下是几种可行的解决思路：

方法1：绑定前先解绑事件 #

在给按钮绑定新的点击事件前，先移除所有已绑定的click事件，避免重复绑定导致逻辑残留：

var width = [0, 575];
var height = [0, 575];

function ScreenTrigger() {
  if (window.innerWidth >= width[0] && window.innerWidth < width[1]) {
    $('.display').addClass("portrait").removeClass("landscape");
    // 先清空旧事件，再绑定新逻辑
    $("#btn").off("click").click(function() {
      alert("This is an alert message!");
    });
  } else if (window.innerHeight >= height[0] && window.innerHeight < height[1]) {
    $('.display').addClass("landscape").removeClass("portrait");
    // 移除按钮的点击事件
    $("#btn").off("click");
  } else {
    $('.display').removeClass("landscape portrait");
    // 非目标尺寸下也清除事件
    $("#btn").off("click");
  }
};
window.onresize = ScreenTrigger;
ScreenTrigger();

方法2：将事件逻辑与屏幕状态判断分离 #

不在resize回调里重复绑定事件，而是只绑定一次点击事件，内部通过判断当前屏幕状态决定是否执行逻辑：

var width = [0, 575];
var height = [0, 575];

function ScreenTrigger() {
  if (window.innerWidth >= width[0] && window.innerWidth < width[1]) {
    $('.display').addClass("portrait").removeClass("landscape");
  } else if (window.innerHeight >= height[0] && window.innerHeight < height[1]) {
    $('.display').addClass("landscape").removeClass("portrait");
  } else {
    $('.display').removeClass("landscape portrait");
  }
};

// 仅绑定一次点击事件，触发时判断屏幕状态
$("#btn").click(function() {
  if ($('.display').hasClass("portrait")) {
    alert("This is an alert message!");
  }
  // 其他尺寸下无操作
});

window.onresize = ScreenTrigger;
ScreenTrigger();

原代码失效原因 #

原代码每次进入portrait分支时，都会给#btn新增一个click事件处理器，而旧的处理器不会自动销毁。多次resize后，按钮会绑定多个相同事件，即使切换到landscape模式，之前绑定的事件依然会被触发。

内容的提问来源于stack exchange，提问作者Justin