javascript e.preventDefault() 的作用和用法

📚 e.preventDefault() 的作用和用法

e.preventDefault() 是一个常用的 JavaScript 方法,用于 阻止事件的默认行为。它通常在 表单提交链接跳转右键菜单 等场景中使用,防止浏览器执行特定的默认操作。

🔎 1. 为什么使用 e.preventDefault()

默认情况下,许多 HTML 元素会有一些 默认行为

元素/事件默认行为
<a> 链接点击跳转到 href 指定的地址
表单提交页面刷新并提交表单数据
输入框按 Enter 键提交表单
右键单击显示浏览器的右键菜单
拖拽文件到页面打开文件

使用 e.preventDefault() 可以 阻止这些默认行为,从而实现自定义的功能。


🛠 2. 基本用法示例

📋 示例 1:阻止链接的默认跳转行为

import React from 'react';const MyComponent = () => {const handleClick = (e) => {e.preventDefault(); // 阻止链接跳转console.log('Link clicked, but no navigation!');};return (<a href="https://example.com" onClick={handleClick}>Click me</a>);
};export default MyComponent;
🔎 解释
  • 当用户点击链接时,默认会跳转到 https://example.com
  • e.preventDefault() 阻止了这个跳转行为,因此不会导航到新的页面。

📋 示例 2:阻止表单的默认提交

import React, { useState } from 'react';const MyForm = () => {const [inputValue, setInputValue] = useState('');const handleSubmit = (e) => {e.preventDefault(); // 阻止表单的默认提交行为console.log('Form submitted with:', inputValue);};return (<form onSubmit={handleSubmit}><inputtype="text"value={inputValue}onChange={(e) => setInputValue(e.target.value)}/><button type="submit">Submit</button></form>);
};export default MyForm;
🔎 解释
  • 默认情况下,表单提交会导致 页面刷新
  • 使用 e.preventDefault() 可以阻止页面刷新,并执行自定义的表单提交逻辑。

📋 示例 3:阻止右键菜单

const handleContextMenu = (e) => {e.preventDefault(); // 阻止默认的右键菜单console.log('Custom right-click menu');
};document.addEventListener('contextmenu', handleContextMenu);
🔎 解释
  • 默认情况下,右键单击会显示 浏览器的右键菜单
  • e.preventDefault() 阻止了这个行为,从而实现自定义的右键菜单。

🎯 3. 常见应用场景

场景说明
阻止链接跳转onClick 中阻止 <a> 的跳转行为
阻止表单提交阻止表单提交时页面刷新,执行自定义逻辑
阻止右键菜单实现自定义的右键菜单
阻止拖拽打开文件阻止文件被拖入浏览器时自动打开
阻止按键事件阻止某些按键的默认功能,例如阻止 Enter 提交表单

⚠️ 4. 注意事项

  • e.preventDefault() 只阻止 默认行为,不会阻止事件传播。如果你还想阻止事件冒泡,请使用 e.stopPropagation()
const handleClick = (e) => {e.preventDefault();e.stopPropagation(); // 阻止事件冒泡
};

🛠 5. 常见问题解答

e.preventDefault()e.stopPropagation() 的区别?

方法作用适用场景
e.preventDefault()阻止默认行为阻止表单提交、链接跳转等
e.stopPropagation()阻止事件冒泡,防止事件传递给父元素阻止父元素监听到事件

📋 示例:组合使用

const handleClick = (e) => {e.preventDefault();     // 阻止默认行为e.stopPropagation();    // 阻止事件冒泡console.log('Button clicked!');
};

📢 总结

  • e.preventDefault():阻止元素的默认行为,例如链接跳转、表单提交、右键菜单等。
  • e.stopPropagation():阻止事件冒泡,防止事件传递给父元素。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/66658.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何在 Docker 中切换登录用户

在 Docker 中进行身份验证时&#xff0c;通常是使用 Docker Hub 或其他私有仓库。如果你希望在同一仓库地址上切换不同的用户进行登录&#xff0c;以下是详细的操作步骤。 1. 退出当前用户 首先&#xff0c;使用 docker logout 命令退出当前用户的登录状态。这个操作会清除 D…

力扣-数组-88 合并两个有序数组

解析 分别维护指向两个数组的指针&#xff0c;不断往后增加指针即可&#xff0c;主要是边界&#xff0c;然后时间复杂度是。 代码 class Solution { public:void merge(vector<int>& nums1, int m, vector<int>& nums2, int n) {vector <int> new…

家用万兆网络实践:紧凑型家用服务器静音化改造(二)

大家好&#xff0c;这篇文章我们继续分享家里网络设备的万兆升级和静音改造经验&#xff0c;希望对有类似需求的朋友有所帮助。 写在前面 在上一篇《家用网络升级实践&#xff1a;低成本实现局部万兆&#xff08;一&#xff09;》中&#xff0c;我们留下了一些待解决的问题。…

小程序组件 —— 29 组件案例 - 字体图标的使用

这一节主要是完善公司信息区域&#xff0c;我们需要在文本之前添加一些字体图标&#xff0c;这一节我们学习如何在微信小程序中使用字体图标&#xff1b; 在项目中&#xff0c;我们使用的小图标&#xff0c;一般由公司设计师进行设计&#xff0c;设计好之后上传到阿里巴巴矢量…

RK3562编译Android13 ROOT固件教程,触觉智能开发板演示

本文介绍编译Android13 ROOT权限固件的方法&#xff0c;触觉智能RK3562开发板演示&#xff0c;搭载4核A53处理器&#xff0c;主频高达2.0GHz&#xff1b;内置独立1Tops算力NPU&#xff0c;可应用于物联网网关、平板电脑、智能家居、教育电子、工业显示与控制等行业。 关闭seli…

STM32-ADC模数转换

目录 1.0 逐次逼近型ADC 2.0 ADC触发 3.0 ADC时钟 4.0 转换模式 5.0 转换时间 6.0 校准 7.0 硬件电路 8.0 数据手册 9.0 程序实现 9.0.1 时钟初始化 9.0.2 GPIO结构体初始化 9.0.3 ADC结构体初始化 9.0.4 ADC转换 9.0.5 AD初始化 9.0.6 获取ADC值 9.0.7 ADC头文…

WebSocket底层原理及 java 应用

WebSocket 底层原理 1. WebSocket 协议的基本原理 WebSocket 是一个在客户端和服务器之间建立持久、全双工的连接的协议。与传统的 HTTP 请求/响应模型不同&#xff0c;WebSocket 允许客户端和服务器双方通过一个持久的连接进行双向通信。 1.1 WebSocket 握手过程 WebSocke…

数据结构:LinkedList与链表—面试题(三)

目录 1、移除链表元素 2、反转链表 3、链表的中间结点 4、返回倒数第k个结点 5、合并两个有序链表 1、移除链表元素 习题链接https://leetcode.cn/problems/remove-linked-list-elements/description/ 描述&#xff1a;给你一个链表的头节点 head 和一个整数 val &#xff…

使用PyTorch实现基于稀疏编码的生成对抗网络(GAN)在CIFAR-10数据集上的应用

使用PyTorch实现基于稀疏编码的生成对抗网络(GAN)在CIFAR-10数据集上的应用 目录 使用PyTorch实现基于稀疏编码的生成对抗网络(GAN)在CIFAR-10数据集上的应用1. 引言2. 数据集介绍3. 模型网络结构3.1 网络结构3.2 编码器3.3 生成器3.4 判别器4. 模型优化器与损失函数4.1 优…

使用 SQL 和表格数据进行问答和 RAG(1)—数据库准备

一. 从 .sql/csv/xlsx 文件创建 sqlite 数据库。 要从.sql文件准备 SQL DB&#xff0c;这里会将创建数据库的代码放到了&#xff0c;将文件复制到data/sql目录中&#xff0c;然后在终端中的项目文件夹中执行&#xff1a; pip install sqlite3现在创建一个名为sqldb的数据库&a…

案例研究:UML用例图中的结账系统

在软件工程和系统分析中&#xff0c;统一建模语言&#xff08;UML&#xff09;用例图是一种强有力的工具&#xff0c;用于描述系统与其用户之间的交互。本文将通过一个具体的案例研究&#xff0c;详细解释UML用例图的关键概念&#xff0c;并说明其在设计结账系统中的应用。 用…

EasyExcel上传校验文件错误信息放到文件里以Base64 返回给前端

产品需求&#xff1a; 前端上传个csv 或 excel 文件&#xff0c;文件共4列&#xff0c;验证文件大小&#xff0c;类型&#xff0c;文件名长度&#xff0c;文件内容&#xff0c;如果某行某个单元格数据验证不通过&#xff0c;就把错误信息放到这行第五列&#xff0c;然后把带有…

VSCode 插件

VSCode 插件 1. GitHub Copilot - AI 代码助手 功能&#xff1a;根据上下文提供实时代码补全&#xff0c;支持自然语言转代码&#xff0c;提供符合现代编程规范的建议。进阶技巧&#xff1a; 使用快捷键 Alt ] 切换多个建议。写注释时&#xff0c;描述业务逻辑而不是具体实现…

机器学习免费使用的数据集及网站链接

机器学习领域存在许多可以免费使用的数据集&#xff0c;这些数据集来自于学习、研究、比赛等目的。 一、综合性数据集平台 1.Kaggle 网址&#xff1a;Kaggle 数据集https://www.kaggle.com/datasets Kaggle是一个数据科学竞赛和社区平台&#xff0c;提供了大量的数据集供用…

Nacos 3.0 Alpha 发布,在安全、泛用、云原生更进一步

自 2021 年发布以来&#xff0c;Nacos 2.0 在社区的支持下已走过近三年&#xff0c;期间取得了诸多成就。在高性能与易扩展性方面&#xff0c;Nacos 2.0 取得了显著进展&#xff0c;同时在易用性和安全性上也不断提升。想了解更多详细信息&#xff0c;欢迎阅读我们之前发布的回…

IP查询于访问控制保护你我安全

IP地址查询 查询方法&#xff1a; 命令行工具&#xff1a; ①在Windows系统中&#xff0c;我们可以使用命令提示符&#xff08;WINR&#xff09;查询IP地址&#xff0c;在弹窗中输入“ipconfig”命令查看本地网络适配器的IP地址等配置信息&#xff1b; ②在Linux系统中&…

解决 ssh connect to host github.com port 22 Connection timed out

一、问题描述 本地 pull/push 推送代码到 github 项目报 22 端口连接超时&#xff0c;测试连接也是 22 端口连接超时 ssh 密钥没问题、也开了 Watt Toolkit 网络是通的&#xff0c;因此可以强制将端口切换为 443 二、解决方案 1、测试连接 ssh -T gitgithub.com意味着无法通…

如何在Windows 11 WSL2 Ubuntu 环境下安装和配置perf性能分析工具?

在Windows 11 WSL2 Ubuntu 环境下完整安装和配置perf性能分析工具 一、背景二、准备工作三、获取并编译Linux内核源码四、安装和配置perf五、测试perf六、总结 一、背景 由于WSL2使用的是微软定制的内核&#xff0c;并非标准的Ubuntu内核&#xff0c;因此直接使用apt安装linux…

120.Jenkins里的Pipeline Script

目录 1. **Declarative Pipeline** 主要部分 示例 2. **Scripted Pipeline** 主要部分 示例 3. **常用指令和功能** 环境变量 工具管理 文件操作 构建触发器 并行执行 异常处理 用户交互 4.**两种类型的特点** 1. **声明式 Pipeline (Declarative Pipeline)** 中…

Python爬虫基础——XPath表达式

首先说一下这节内容在学习过程中存在的问题吧&#xff0c;在爬取百度网页文字时&#xff0c;出现了问题&#xff0c;就是通过表达式在网页搜索中可以定位&#xff0c;但是通过代码无法定位&#xff0c;请教了一位老师&#xff0c;他说是动态链接&#xff0c;目前这部分内容比较…