e.preventDefault() 和 e.stopPropagation()

e.preventDefault() 和 e.stopPropagation() 是 JavaScript 中用于控制事件行为的两个方法。它们常用于阻止事件的默认行为和事件冒泡。以下是它们的具体作用和区别：

1. e.preventDefault()

e.preventDefault() 用于阻止默认行为。通常应用在想要阻止某些元素的默认操作时，比如表单提交、链接跳转等。

• 用法：在事件处理函数中调用 e.preventDefault()。
• 作用：阻止浏览器对当前事件的默认处理。

某些浏览器事件具有与事件相关联的默认行为。例如，点击 <form> 表单内部的按钮会触发表单提交事件，默认情况下将重新加载整个页面：

export default function Signup() {
  return (
    <form onSubmit={() => alert('提交表单！')}>
      <input />
      <button>发送</button>
    </form>
  );
}

你可以调用事件对象中的 e.preventDefault() 来阻止这种情况发生：

export default function Signup() {
  return (
    <form onSubmit={e => {
      e.preventDefault();
      alert('提交表单！');
    }}>
      <input />
      <button>发送</button>
    </form>
  );
}

2. e.stopPropagation()

e.stopPropagation() 用于阻止事件冒泡，即阻止事件从子元素冒泡到父元素。这通常用于防止事件处理器在父级元素上触发。

• 用法：在事件处理函数中调用 e.stopPropagation()。
• 作用：阻止事件向上冒泡，不会触发父级的同类事件处理程序。

function handleInnerClick(e) {
  e.stopPropagation();  // 阻止事件冒泡，不会触发父元素的点击事件
  console.log("Inner div clicked");
}

function handleOuterClick() {
  console.log("Outer div clicked");
}

<div onClick={handleOuterClick}>
  <div onClick={handleInnerClick}>Click me</div>
</div>

在这个示例中，点击内部 <div> 时，handleInnerClick 会触发并输出 "Inner div clicked"，但不会触发外层 <div> 的 handleOuterClick，因为 e.stopPropagation() 阻止了事件冒泡。

总结

• e.preventDefault()：阻止少数事件的默认浏览器行为。
• e.stopPropagation()：阻止事件冒泡，阻止触发绑定在外层标签上的事件处理函数。

它们经常一起使用，尤其是在需要控制某个子元素的事件行为且不影响父级元素时。