止步与屏蔽：揭秘 e.stopPropagation() 和 e.preventDefault() 的隐秘作用

止步于此：e.stopPropagation()

想象一个由嵌套元素构成的 DOM 树，就像俄罗斯套娃一样。当用户与其中一个元素交互时，事件就会触发，并沿DOM树向上冒泡。事件冒泡是一种事件处理机制，允许父元素响应子元素触发的事件。

但有时，我们希望阻止这种冒泡行为。例如，当单击超链接时，我们可能希望阻止单击事件冒泡到父元素，从而防止父元素处理该事件。这时候，e.stopPropagation() 就派上用场了。

通过调用 e.stopPropagation()，我们可以拦截事件的向上冒泡，使它只在当前元素内处理。这就像在事件传播路径上设置了一道屏障，阻止事件进一步传播。

屏蔽默认行为：e.preventDefault()

除了阻止事件冒泡之外，我们还可以使用 e.preventDefault() 来屏蔽元素的默认行为。默认行为是浏览器对特定事件的内置响应。例如，单击超链接的默认行为是导航到链接指向的 URL。

通过调用 e.preventDefault()，我们可以覆盖浏览器的默认行为。这在创建自定义行为时非常有用，例如阻止表单提交或取消超链接的导航行为。

协同作战：止步与屏蔽的组合技

e.stopPropagation() 和 e.preventDefault() 可以协同工作，提供更精细的事件处理控制。例如，我们可以在一个元素中同时使用这两个方法，以阻止事件冒泡和屏蔽其默认行为。

这在创建复杂交互时非常有用，例如拖放功能。我们可以使用 e.stopPropagation() 防止拖动事件冒泡到父元素，而使用 e.preventDefault() 屏蔽浏览器的默认拖动行为，从而实现自定义的拖放体验。

示例代码：阻止冒泡和屏蔽默认行为

// 阻止事件冒泡
document.querySelector('button').addEventListener('click', (e) => {
  e.stopPropagation();
});

// 屏蔽默认行为
document.querySelector('form').addEventListener('submit', (e) => {
  e.preventDefault();
});

结论：掌控事件处理

e.stopPropagation() 和 e.preventDefault() 是 JavaScript 事件处理中不可或缺的工具。通过理解它们阻止冒泡和屏蔽默认行为的能力，我们可以创建更加复杂和响应迅速的 web 应用程序。从控制事件传播到自定义用户交互，这些方法为我们提供了对事件处理的全面控制。