preventDefault()和stopPropagation()的联系和区别

本文主要是介绍preventDefault()和stopPropagation()的联系和区别，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、联系

都是event方法，都能阻止事件发生

二、区别

1.preventeDefault()阻止的dom元素默认的事件，如提交的按钮，超链接的跳转等。

2.stopPropagation()阻止的不是事件本身，是事件的传播，通过阻止事件传播阻止JavaScript开发人员的绑定事件

三、代码

1.preventeDefault()

未设置:点击a标签跳转百度

<a href="https://www.baidu.com">点击跳转百度</a>
let a = document.querySelector('a')
a.addEventListener('click',e=>{})

设置后:点击a无反应

let a = document.querySelector('a')
a.addEventListener('click',e=>{e.preventDefault()
})

2.stopPropagation()

未设置:点击p后标签打印123和666

let div1 = document.querySelector('div')
div1.addEventListener('click',e=>{console.log(666)
})
let ps = document.querySelectorAll('p')
ps.forEach(item=>{item.addEventListener('click',e=>{console.log(123)// e.stopPropagation()})
})

设置后:点击p后标签打印123

let div1 = document.querySelector('div')
div1.addEventListener('click',e=>{console.log(666)
})
let ps = document.querySelectorAll('p')
ps.forEach(item=>{item.addEventListener('click',e=>{console.log(123)e.stopPropagation()})
})

这篇关于preventDefault()和stopPropagation()的联系和区别的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---