stopPropagation、preventDefault和returnfalse的区别

大家好，我是前端教主道廷。想要获取更多前端精彩内容，关注我（全网同名）解锁前端成长新姿势。以下文字：stopPropagation防止事件冒泡和捕获。因为事件可以在各个层次的节点之间传递，无论是冒泡还是捕获，有时我们希望事件在特定节点执行完后不传递，可以使用事件对象的stopPropagation()方法。preventDefault防止浏览器默认行为。浏览器的默认行为：对于一些特定的事件，浏览器有它的默认行为。例如：点击链接跳转，点击鼠标右键调出浏览器右键菜单。当你回车填写表单时，会自动提交给服务器并返回false；当你调用它时，你会做3件事：event.preventDefault()–它停止浏览器的默认行为。event.stopPropagation()–这会阻止事件传播（或“冒泡”）DOM。停止回调执行并立即返回。比如returnfalse可以用来阻止某个标签的默认跳转事件，当然也可以用preventDefault()代替。表对比：方法事件冒泡/捕获默认事件stopPropogation()不冒泡ExecutepreventDefault()冒泡不执行returnfalse不冒泡不执行补充：stopPropagation和stopImmediatePropagation的区别可以防止事件冒泡，父节点无法接收到事件。不同的是stopPropagation不会影响元素后续相同事件的执行，而stopImmediatePropagation会阻止元素后续相同事件的执行。示例：

给p绑定一个点击事件，然后给p绑定第二个点击事件，给div绑定一个点击事件。如果stopPropagation在p的第一次点击事件回调中，则不会执行div的点击事件回调，但会执行p的第二次点击事件回调。如果stopImmediatePropagation在p的第一次点击事件回调中，div的点击事件不会执行回调，p的第二次点击事件也不执行。---完---大家好，我是前端队长道廷，专注分享前端与认知。希望在这里和大家分享我的前端学习和工作经验，记录个人成长。想要获取更多前端精彩内容，关注我（全网同名）解锁前端成长新姿势。