IE与Edge浏览器中.on('click')事件失效问题咨询

这种时灵时不灵的浏览器兼容性bug真的挺闹心的，我之前在维护老项目时也碰到过类似情况，结合你的代码和老浏览器的特性，给你梳理几个最可能的原因和对应的解决办法：

1. 动态元素绑定问题（最常见） #

看你的代码是直接把事件绑定在.titleMarge这类元素上，如果这些元素是动态生成的（比如通过AJAX加载、后续JS插入DOM），老版本IE/Edge里直接绑定的事件很容易失效——因为绑定代码执行时，这些元素还没出现在DOM里，自然绑不上。

解决办法是用事件委托，把事件绑定到页面加载时就存在的静态父元素上（比如最外层容器，实在不确定就用document）：

// 假设你的元素都在#configContainer这个静态容器内，优先用最近的静态父元素
$('#configContainer').on('click', '.titleMarge', function(){
  $('.margeConfig').css('display','block');
  $('.borderDivConfig').css('display','none');
  $('.shadowConfig').css('display','none');
  $('.activeMarge').html('&#x25c4');
  $('.activeBorder').html('');
  $('.activeOmbre').html('');
});

$('#configContainer').on('click', '.titleBorder', function(){
  $('.borderDivConfig').css('display','block');
  $('.margeConfig').css('display','none');
  $('.shadowConfig').css('display','none');
  // 你的其他代码...
});

2. 重复绑定导致的冲突 #

如果你的绑定代码被重复执行（比如在AJAX回调、页面刷新逻辑里多次调用），同一个元素会被绑定多个click事件，老浏览器里很容易出现触发异常甚至不触发的情况。

解决办法是绑定前先解绑旧事件：

// 先清除之前绑定的click事件，再绑定新的
$('.titleMarge').off('click').on('click', function(){
  // 你的代码...
});

当然，用上面说的事件委托也能避免这个问题——因为事件只绑定在父元素一次，不会重复。

3. CSS指针事件的干扰 #

如果你的.titleMarge或者它的父元素被设置了pointer-events: none（某些状态下动态添加的样式也有可能），点击事件会直接被拦截，老浏览器对这个CSS属性的支持很不稳定。

检查一下你的CSS代码，确保可点击元素在任何状态下都没有pointer-events: none，如果有特殊场景需要设置，也要在可点击时改回pointer-events: auto。

4. 事件冒泡兼容性问题 #

虽然jQuery已经做了事件兼容，但老版本IE/Edge还是可能出现冒泡异常。可以尝试在事件处理函数里加上阻止默认行为和冒泡的代码：

$('.titleMarge').on('click', function(e){
  // 你的业务代码...
  e.preventDefault(); // 阻止默认行为
  e.stopPropagation(); // 阻止事件冒泡
  return false;
});

注意：这个方法要谨慎使用，别影响其他需要冒泡的事件逻辑。

5. jQuery版本太老 #

如果你的项目用的是非常老旧的jQuery版本（比如1.x早期版本），可能和Edge/新版IE的DOM API不兼容。建议升级到兼容老浏览器的最新版本（比如jQuery 1.12.x），如果项目允许的话，直接升级到jQuery 3.x更好。

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