如何阻止jQuery的toggleClass方法执行？含场景代码示例

先给你指出原代码里的一个小错误哈——e.preventdefault拼写错了，应该是e.preventDefault()，不然阻止默认行为的逻辑是不生效的，先把这个小问题修正了~

接下来针对你的需求，我给你两种常用的解决方案，你可以根据实际场景选择：

方案一：用开关变量临时禁用（可恢复） #

这种方法适合你之后可能需要重新开启.toggleClass功能的场景，通过一个全局的开关变量来控制逻辑是否执行：

var counter = 0;
// 定义开关变量，初始状态为允许toggle
let isToggleAllowed = true;

$(".btn").on('click', function (e) {
  counter++;
  e.preventDefault(); // 修正后的阻止默认行为
  // 只有开关开启时才执行toggleClass
  if (isToggleAllowed) {
    $(".btn").toggleClass('bgRed');
  }
}).on('animationend', function(e) {
  // 动画结束的回调同样受开关控制
  if (isToggleAllowed) {
    $(".btn").toggleClass('bgRed');
  }
});

$(".btn2").on('click', function (e) {
  // 点击btn2时关闭开关，阻止toggle执行
  isToggleAllowed = false;
  // 如果之后需要恢复功能，只需要把isToggleAllowed设为true即可
});

方案二：直接解绑事件（永久禁用） #

如果希望点击btn2后，.btn的点击和动画结束回调彻底失效，不会再触发toggleClass，可以用jQuery的off()方法解绑对应的事件：

var counter = 0; 

$(".btn").on('click', function (e) { 
  counter++; 
  e.preventDefault(); // 修正拼写错误
  $(".btn").toggleClass('bgRed'); 
}).on('animationend', function(e) { 
  $(".btn").toggleClass('bgRed'); 
}); 

$(".btn2").on('click', function (e) { 
  // 解绑.btn的click和animationend事件，彻底停止toggle操作
  $(".btn").off('click animationend');
  // 如果你只想解绑其中一个事件（比如只禁用点击触发的toggle），可以写：$(".btn").off('click');
}); 

两种方案的区别 #

• 开关变量法：灵活可控，之后随时能通过修改开关值恢复功能，适合临时禁用的场景
• 事件解绑法：一次性移除事件绑定，除非重新绑定事件，否则不会再执行toggle逻辑，适合永久禁用的场景

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