使用:not选择器时hover事件失效的原因与解决方案咨询

嘿，我来帮你搞定这个头疼的问题！你想用:not()选择器给页面里的元素批量绑定hover事件，但排除特定两个元素却没生效，这大概率是踩了:not()的两个常见坑——选择器匹配范围没考虑子元素，或者事件冒泡在搞鬼，咱们一步步说清楚：

为什么你的:not()没生效？ #

我猜你大概写了类似这样的代码：

$('*:not(.exclude-1, .exclude-2)').hover(
  () => { /* 鼠标进入逻辑 */ },
  () => { /* 鼠标离开逻辑 */ }
);

问题出在这两个地方：

• *匹配了所有元素，包括排除元素的子元素：:not(.exclude-1)只是排除了.exclude-1本身，但它里面的<span>、<div>这些子元素依然会被*选中，hover这些子元素时还是会触发事件，看起来就像排除没起作用。
• 事件冒泡的干扰：就算你给.exclude-1本身排除了hover，但如果它的子元素触发了hover事件，事件会冒泡到.exclude-1的父元素（而父元素没被排除），照样会执行你的hover逻辑。

可行的解决方法 #

方法1：精准限定选择器，避免匹配无关元素 #

如果你的hover目标本来就是特定类型的元素（比如按钮、链接、卡片），别用*这种通配符，直接指定元素类型+:not()，这样既精准又高效：

// 比如给所有按钮和链接绑定hover，排除两个特定元素
$('button:not(.exclude-1), a:not(.exclude-2)').hover(
  function() {
    $(this).addClass('hover-active');
  },
  function() {
    $(this).removeClass('hover-active');
  }
);

方法2：事件委托+目标判断（推荐） #

这种方式更灵活，尤其是页面元素多或者有动态加载元素的时候，只在父元素（比如document）上绑定一次事件，然后判断触发事件的元素是否在排除范围内：

$(document)
  // 鼠标进入事件
  .on('mouseenter', '*', function(e) {
    // 检查当前元素是否是排除项，或者是否在排除元素内部
    const isExcluded = $(this).hasClass('exclude-1') 
      || $(this).hasClass('exclude-2') 
      || $(this).closest('.exclude-1, .exclude-2').length > 0;
    
    if (isExcluded) {
      e.stopPropagation(); // 阻止事件冒泡到父元素
      return;
    }

    // 执行你的hover进入逻辑
    $(this).css('background-color', '#f0f0f0');
  })
  // 鼠标离开事件
  .on('mouseleave', '*', function(e) {
    const isExcluded = $(this).hasClass('exclude-1') 
      || $(this).hasClass('exclude-2') 
      || $(this).closest('.exclude-1, .exclude-2').length > 0;
    
    if (isExcluded) {
      e.stopPropagation();
      return;
    }

    // 执行你的hover离开逻辑
    $(this).css('background-color', '');
  });

这里的closest()方法会向上查找最近的排除元素，确保即使鼠标移到排除元素的子元素上，也不会触发事件。

方法3：扩展:not()选择器，排除元素及其子元素 #

如果你一定要用通配符*，可以把排除元素的所有子元素也加进:not()里，这样就能彻底排除整个元素树：

$('*:not(.exclude-1, .exclude-2, .exclude-1 *, .exclude-2 *)').hover(
  () => { /* 进入逻辑 */ },
  () => { /* 离开逻辑 */ }
);

不过要注意，这种方式因为要匹配所有元素，性能会比前两种差一些，页面元素多的时候不推荐。

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