0

0

javascript如何阻止事件的默认行为?【教程】

夜晨

夜晨

发布时间:2026-01-31 12:42:08

|

853人浏览过

|

来源于php中文网

原创

preventDefault() 有时无效,主因是绑定时机错误、异步调用、passive 事件限制(如 touchmove 默认 passive)、React 合成事件池化失效,或事件本身不可取消(需检查 event.cancelable)。

javascript如何阻止事件的默认行为?【教程】

event.preventDefault() 就能阻止默认行为,但必须在事件触发时调用,且不能在事件已冒泡完成或被取消后补救。

为什么 preventDefault() 有时没效果?

常见原因是事件监听器绑定时机不对,或者事件对象本身不可修改(比如合成事件在 React 中需提前处理)。

  • 在原生 DOM 事件中,preventDefault() 必须在事件处理函数内同步调用,异步调用(如放在 setTimeout 里)完全无效
  • 某些浏览器对特定事件(如 scrolltouchmove)有 passive 默认行为,此时直接调用 preventDefault() 会报错 Unable to preventDefault inside passive event listener
  • React 的合成事件对象是池化复用的,如果在异步回调中访问 event.preventDefault(),可能已失效,应先调用 event.persist() 或提取所需属性

如何正确绑定并阻止 clicksubmit 的默认行为?

最稳妥的方式是监听事件后立即调用 preventDefault(),同时注意事件委托场景下的目标判断。

  • 表单提交:在 formsubmit 事件中调用,而不是按钮的 click —— 否则可能漏掉回车提交
  • 链接跳转:在 a 标签的 click 事件中调用,但要注意若 a 没有 href 属性,本身无默认行为,preventDefault() 不起作用
  • 使用事件委托时,需检查 event.target 是否匹配预期元素,避免误阻止其他元素行为

示例:

立即学习Java免费学习笔记(深入)”;

小麦企业网站展示系统1.1
小麦企业网站展示系统1.1

小麦企业网站展示系统介绍:一、安装使用将xiaomai.sql导入数据库二、后台登录后台帐号,密码默认都是admin,config.php 配置文件可根据自行需要修改,IP地址,数据库用户名,密码,及表名后台目录默认admin,支持自行任意修改目录名三、注意事项1 本源码完全免费,采用伪静态,减少不必要的源码重复,速度更快,支持二次开发。2、注明本程序编码为UTF8,如发生乱码,请注意修改编码3、

下载
document.querySelector('form').addEventListener('submit', function (e) {
  e.preventDefault(); // 阻止页面刷新
  console.log('表单已拦截');
});

移动端 touch 事件为何经常阻止失败?

因为现代浏览器默认将 touchstarttouchmove 设为 passive,即“不允许调用 preventDefault()”以提升滚动性能。

  • 解决方法是在 addEventListener 中显式传入 { passive: false }
  • 但注意:只对真正需要阻止默认滚动的场景才设为 false,否则会影响页面滑动流畅度
  • iOS Safari 对 passive: false 支持较晚,iOS 12+ 才稳定可用;低版本需降级处理或改用 pointer 事件

示例:

立即学习Java免费学习笔记(深入)”;

element.addEventListener('touchmove', function (e) {
  e.preventDefault();
}, { passive: false });

最容易被忽略的是 passive 选项和事件生命周期——不是所有事件都允许阻止,默认行为是否可取消得看 event.cancelable 返回值,建议每次调用前加个判断。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
DOM是什么意思
DOM是什么意思

dom的英文全称是documentobjectmodel,表示文件对象模型,是w3c组织推荐的处理可扩展置标语言的标准编程接口;dom是html文档的内存中对象表示,它提供了使用javascript与网页交互的方式。想了解更多的相关内容,可以阅读本专题下面的文章。

3403

2024.08.14

go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

0

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

0

2026.01.31

Golang人工智能合集
Golang人工智能合集

本专题整合了Golang人工智能相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

69

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

72

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

67

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.4万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.0万人学习

React核心原理新老生命周期精讲
React核心原理新老生命周期精讲

共12课时 | 1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号