js阻止默认事件和阻止事件冒泡浅谈

最新推荐文章于 2025-05-26 10:53:32 发布

°Carl

最新推荐文章于 2025-05-26 10:53:32 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_51427204/article/details/124952839

本文深入探讨了JavaScript中的默认事件处理，如a链接的跳转、表单提交及右键菜单显示，并展示了如何使用`e.preventDefault()`或`return false`阻止这些默认行为。同时，解释了事件冒泡的概念，即事件如何从子元素逐级传递到父元素，并通过`e.stopPropagation()`来阻止这一过程。了解这些基础知识对于优化前端交互至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

入行三年，今天重新谈下这两个事件：

一、默认事件，即像

1.a链接点击跳转行为

2.form表单中的button或type为submit的input点击会默认提交submit事件

3.document绑定contextmenu默认右键点击会弹出菜单

所以，如果你不想事件点击触发默认行为，就需要我们讲的组织默认事件了，非常简单的方法

如果是移动端，不考虑兼容问题直接在绑定元素的事件函数中写

e.preventDefault 或者直接 return false

若是在pc端中，考虑ie的兼容问题的话，

document.querySelector("a").onclick= function(e){
    var event = e||window.event;
    e.preventDefault)?e.preventDefault():event.returnValue = false;
    }
}

那说完了默认事件，说说冒泡

二、冒泡事件，即当子元素，父元素，document都绑定事件的时候，只点击子元素区域会依次冒泡到document中，这时候可能会造成不必要的麻烦，所以只需要在目标元素的绑定方法中直接阻止冒泡就行。

e.stopPropagation()

兼容低版本写法： e.cancelBubble = true