先记住这个答案
两者的区别只在「同一元素上的剩余监听器」。事件在某个元素上触发时，该元素上同类型的监听器按注册顺序依次执行。调用 stopPropagation() 后，当前元素本次注册的其余监听器照常执行完，但事件不再冒泡（或继续捕获）到其他节点。调用 stopImmediatePropagation() 则更强：当前监听器执行完后，同一元素上排在后面的监听器全部跳过，事件也不再向外传播。两者都不影响默认行为，要取消默认行为仍需 preventDefault()。判断依据很简单：只想拦截向上传播用前者，想独占该事件、阻止后续处理逻辑介入时用后者。
- stopPropagation 不拦同元素剩余监听器
- stopImmediatePropagation 连本元素后续监听器一起取消
- 两者都不影响默认行为，取消默认用 preventDefault
监听器分发被拦截的两个层级
浏览器分发事件时，会为每个节点按注册顺序收集监听器并逐个调用。stopPropagation() 在监听器内部被调用后，只是给事件打上「不再前往下一个节点」的标记，当前节点的监听器列表会完整执行完毕。所以同一按钮上的三个 click 监听器，即使第一个调用了它，第二、第三个依然会运行，只是外层容器的监听器收不到这次事件。
stopImmediatePropagation() 则把停止的粒度细化到「当前监听器列表」。它一旦执行，当前元素上排在该监听器之后、尚未执行的所有监听器都被跳过，事件同样不再向外传播。可以理解为前者是「本站是终点但车上乘客正常下车」，后者是「立即清场」。这个差异只在同一元素注册了多个同类型监听器时才可观察。
function dispatch(listeners, mode) {
const log = [];
const event = {
stop: false,
immediate: false,
stopPropagation() { this.stop = true; },
stopImmediatePropagation() { this.stop = true; this.immediate = true; }
};
for (const fn of listeners) {
if (event.immediate) break;
fn(event, log);
}
if (!event.stop) log.push("propagated to parent");
return log;
}
const make = (mode) => [
(e, log) => { log.push("listener A"); if (mode) e[mode](); },
(e, log) => log.push("listener B")
];
console.log(JSON.stringify(dispatch(make("stopPropagation"))));
console.log(JSON.stringify(dispatch(make("stopImmediatePropagation"))));查看输出与解释
["listener A","listener B"]
["listener A"]纯 JavaScript 模拟：第一个监听器分别调用两种方法。stopPropagation 时 listener B 仍执行但不再冒泡；stopImmediatePropagation 时 listener B 直接被跳过。真实浏览器环境语义与此一致。
工具栏按钮：拦截冒泡与独占处理的取舍
场景：一个表格单元格里放了删除按钮，单元格本身绑定了「点击选中行」的监听器，按钮上有两个 click 监听器：一个执行删除，另一个是埋点统计。需求是点删除按钮时不触发行选中。此时在删除监听器里调用 stopPropagation() 即可：埋点监听器照常执行，行选中因冒泡被切断而不会触发，两层职责互不干扰。
若需求改为「按钮处于禁用审核期时，删除和埋点都不能执行，但行选中可以保留」，就由最先注册的守卫监听器在条件命中时调用 stopImmediatePropagation()：同一按钮上的删除与埋点全部被跳过。若还想保留行选中，就不能用它，只能改为守卫监听器内部 return 并把删除逻辑挪进守卫里控制，代价是监听器之间产生耦合。
两种方法都会失效或帮不上忙的情况
第一个边界：两者对监听器的影响只限于「本次事件分发中尚未执行的部分」。如果其他监听器已在捕获阶段或更早的注册顺序中执行过，再调用任何停止方法都无法撤回其效果。另外监听器挂在 document 或 window 且先于目标监听器执行（捕获阶段）时，目标上调用 stopPropagation() 根本拦不住它，因为那时它已经运行完了。
第二个边界：两种方法都不阻止默认行为。表单按钮的提交、链接跳转、右键菜单照常在事件分发完成后发生，必须另行调用 preventDefault()。第三个边界：它们无法影响其他独立派发的事件，例如 mousedown 里停止传播不会阻止随后的 click。处理代价是需要理清事件序列，在正确的事件类型上做拦截，否则拦截写错了位置且难以排查。
容易答错的地方
- 以为 stopPropagation 会跳过本元素其他监听器
- 不会。
stopPropagation()只切断向其他节点的传播，同一元素上按注册顺序排在后面的同类型监听器依然执行。需要连本元素剩余监听器一起取消时才用stopImmediatePropagation()。 - 以为停止传播等于阻止默认行为
- 两者完全独立。停止传播只影响监听器分发，链接跳转、表单提交等默认行为照常发生，必须调用
preventDefault()。反过来preventDefault()也不会停止冒泡，需要时二者要同时调用。
面试官还会怎么问？
stopImmediatePropagation 对捕获阶段的监听器有影响吗？
有，但只影响尚未执行的部分。若事件还在捕获途中，调用后捕获与冒泡路径上后续所有监听器都不执行；若某些捕获监听器已经执行过，则无法撤回。它阻止的是「之后会发生什么」，而不是回滚已发生的调用。
同一元素监听器很多时，如何确认是哪个方法拦停了事件？
可在可疑监听器里打日志或断点，观察注册顺序与停止调用的先后。event.cancelBubble 为 true 说明有人调用了 stopPropagation()，但无法区分是否用了 stopImmediatePropagation()，只能靠排查代码确认。
return false 能替代这两个方法吗？
在 addEventListener 注册的回调里 return false 没有任何效果。只有老式 onclick = fn 属性监听器中返回 false 等价于 preventDefault()，并不阻止传播。jQuery 的 return false 才是同时调用停止传播与阻止默认行为的语法糖。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。