文章目录
- [.stop VS .prevent](#.stop VS .prevent)
- 浏览器的默认行为
.stop VS .prevent
| - | .stop | .prevent |
|---|---|---|
| 作用 | 阻止事件向上（向父元素）冒泡传播 | 阻止 DOM 元素的默认行为 |
| 含义 | 当子元素触发事件时，事件会依次向上传递给父元素、祖先元素（如 click事件从按钮传递到外层 div） | 浏览器为某些元素预设的行为，如 <a>标签点击跳转、表单提交刷新页面等 |
| 解释 | .stop会中断这一过程，使事件仅在当前元素处理，不传递给父元素 | .prevent会取消这些默认行为，仅执行自定义的事件处理函数 |
| 其他 | 若不使用 .stop，点击按钮会同时触发 handleButtonClick和 handleParentClick 使用 .stop后，仅触发 handleButtonClick | - |
| 应用场景 | 父子元素嵌套，避免事件重复触发 | 表单提交、链接跳转等需阻止浏览器默认行为的场景 |
| 底层方法 | 调用 event.stopPropagation() | 调用 event.preventDefault() |
浏览器的默认行为
| 元素/事件 | 默认行为 | 默认行为详解 | .prevent的作用 |
|---|---|---|---|
| <a href="...">的 click | 跳转链接 | 点击<a>标签（含 href属性）时，浏览器会跳转到指定 URL 或锚点 | |
| <form>的 submit | 刷新页面/提交到服务器 | 点击 type="submit"的按钮或按回车键提交表单时，浏览器会刷新页面（或跳转到 action指定的 URL） | 阻止刷新，执行 AJAX 提交 |
| <input type="text">的 keydown.enter | 触发表单提交 | 在单行输入框 () 中按回车键时，若表单内有提交按钮，会触发表单提交（刷新页面） | 阻止提交，执行自定义回车逻辑 |
| 右键事件 (contextmenu) | 弹出浏览器默认右键菜单 | 在页面任意位置右键点击时，浏览器会弹出默认的上下文菜单（含刷新、查看源码等选项） | 阻止菜单，显示自定义菜单 |
| 复选框/单选框的 click | 切换选中状态 | 点击复选框 () 或单选框 () 时，浏览器会自动切换选中状态 | 阻止切换，手动控制状态 |
| 拖拽事件 (dragstart) | 拖拽元素时触发默认行为（如打开链接） | 选中文本时，浏览器高亮显示选中内容。 拖拽图片或链接时，浏览器会尝试在新窗口打开或下载 | |
| 文本选择事件 (selectstart) | 允许用户选中文本 | 禁止选中文本 |
浏览器的默认行为注意事项
- 并非所有默认行为都需要阻止：如输入框的输入、复选框的正常切换，通常应保留默认行为以保证用户体验。
- 谨慎阻止键盘快捷键：如阻止 Ctrl + S可能影响用户习惯，需明确提示自定义功能。
- 组合使用修饰符：.prevent常与 .stop（阻止冒泡）一起使用。
浏览器为什么有默认行为
浏览器默认行为的本质是在标准、体验和效率之间取得平衡：
对用户：提供一致、可预期的交互体验。
对开发者：减少基础代码量，专注核心功能。
对 Web 生态：确保跨浏览器兼容性和向下兼容性。当默认行为不满足需求时，开发者可通过 .prevent（Vue）或 event.preventDefault()（原生 JS）覆盖它们，实现自定义逻辑。