事件传播控制与默认行为拦截模式

超越preventDefault与stopPropagation的基础，讲解组合使用技巧、被动事件监听、以及如何实现全局事件防火墙。 · 难度：入门 · +10XP

事件传播控制与默认行为拦截模式

大多数教程只教你return false，但实际项目中需要更细粒度的控制。本教程将区分event.preventDefault()、event.stopPropagation()和event.stopImmediatePropagation()的不同。你将学会如何只阻止默认行为而不停止冒泡（例如表单验证失败时仍然允许错误信息冒泡到父级），以及如何利用event.isDefaultPrevented()来检查其他处理程序是否已经阻止。更高级的内容包括在捕获阶段绑定事件（通过useCapture参数）实现全局拦截，以及使用passive: true优化滚动事件。最后将演示一个全局事件防火墙模式：在document上捕获所有链接点击，并阻止未确认的外部链接跳转。

$(document).on('click', 'a[href^="http"]', function(e) {
  if (!confirm('跳转到外部链接？')) {
    e.preventDefault();
    e.stopPropagation(); // 阻止其他处理程序
  }
});
// 被动监听提高滚动性能
$(window).on('touchmove', function() {}, { passive: true });