如何阻止jQuery在SELECT选项变更时自动刷新页面？

兄弟，我太懂接手这种代码质量堪忧的老项目的痛苦了——全局绑定的事件简直是隐形炸弹！你遇到的情况是，新增的select触发了网站通用JS里全局绑定的change事件，而你看到的那段jQuery v2.1.3的代码只是jQuery内部的事件处理入口（elemData.handle是jQuery为元素统一创建的事件分发器，所有绑定到该元素的事件都会走这个函数），真正导致页面刷新的是绑定在change事件上的业务逻辑。

给你几个靠谱的解决方案，按从易到难的顺序来：

1. 阻止事件冒泡，避开全局监听器 #

如果全局事件是通过事件委托（比如$(document).on('change', 'select', ...)）绑定的，那在你的select的change事件里阻止冒泡就能切断全局逻辑的触发：

// 替换成你的select的选择器
$('#custom-select').on('change', function(e) {
  // 这里写你自己的业务逻辑
  console.log('处理自定义select的变更');
  
  // 阻止事件向上冒泡，让全局监听器收不到这个事件
  e.stopPropagation();
});

注意：如果你的业务逻辑不需要触发select的默认行为（比如表单提交相关的），也可以用return false，但它会同时阻止默认行为和冒泡，按需选择。

2. 解绑原有事件，重新绑定自定义逻辑 #

如果全局事件是直接绑定在select元素上的（不是委托），那可以先解绑该元素的所有change事件，再绑定你自己的逻辑：

$('#custom-select').off('change').on('change', function() {
  // 这里写你自己的业务逻辑，不会触发刷新了
});

⚠️ 注意：off('change')会移除该元素上所有的change事件监听器，如果你还需要保留某些原有逻辑，得提前确认好。

3. 定位并修改全局绑定的根源（谨慎操作） #

如果项目允许修改通用JS库，最好的方式是找到那个全局绑定select的change事件的代码，看看能不能给它加个过滤条件——比如排除你的select的类名或ID：

// 原全局代码可能是这样的，修改后添加过滤规则
$(document).on('change', 'select:not(#custom-select)', function() {
  location.reload(); // 这里是导致刷新的罪魁祸首
});

这样既能保留原有逻辑，又不会影响你的新select，不过修改通用库前一定要做好测试，避免影响其他页面。

总结一下：优先用前两种不改动原有全局逻辑的方案，风险小；如果必须改通用库，一定要做好回归测试。

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