本文小编为大家详细介绍“js中的e.preventDefault()怎么使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“js中的e.preventDefault()怎么使用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
问题：
为什么我在父组件上使用preventDefault()，阻止默认事件会导致我的子组件的默认事件失效？
分析：
首先，我们看官网对event.preventDefault()这一方法的解释，在繁体中文版的MDN网站中，只是简单的提到了取消事件的预设行为，而不影响事件的传递。如字面意思，很好理解。
而在简体中文版的MDN网站中，对于此事件描述的文字对比繁体版较多
在这里提到一个词，叫显示处理，不是很能理解这个词。繁体版与简体版的比较对应下来，也能够说的过去，所以这里并不能解决我们的疑问，到底为什么在父元素上调用了这个方法阻止默认事件，子元素的默认事件也消失了？
持续跟进：
翻遍了百度，我没有找到有关于这个问题的解答，莫得办法了，只有自己去试着找一些结论性的东西。
尝试：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box{height: 300px;overflow: auto;width:200px;padding: 40px;margin: 0 auto;background: grey;}#gdfather{position: relative;height: 600px;overflow: auto;width:400px;margin: 40px;background: rgba(0, 255, 255, 0.219);}#father{position: absolute;top: 20px;height: 200px;overflow: auto;width: 600px;margin: 40px;background-color: rgba(128, 128, 128, 0.349);}#son{position: absolute;top: 20px;height: 1400px;width: 800px;margin: 40px;background-color: rgba(205, 92, 92, 0.26);}#box2{display: flex;justify-content: center;align-items: center;flex-direction: column;height:200px;width: 200px;background-color: khaki;}</style></head><body><div id='box'><div id='gdfather'><p>祖先中的内容</p><p>祖先中的内容</p><p>祖先中的内容</p><p>祖先中的内容</p><p>祖先中的内容</p><p>祖先中的内容</p><p>祖先中的内容</p><p>祖先中的内容</p><p>祖先中的内容</p><div id='father'><p>父亲中的内容</p><p>父亲中的内容</p><p>父亲中的内容</p><p>父亲中的内容</p><p>父亲中的内容</p><p>父亲中的内容</p><p>父亲中的内容</p><p>父亲中的内容</p><p>父亲中的内容</p><div id='son'><p>儿子中的内容</p><p>儿子中的内容</p><p>儿子中的内容</p><p>儿子中的内容</p><p>儿子中的内容</p><p>儿子中的内容</p><p>儿子中的内容</p><p>儿子中的内容</p><p>儿子中的内容</p></div></div></div></div><div id='box2'><input id="ipt" type="text"><div id='inbox'><input id='inIpt' type="text"></div></div><script>let gdfather=document.getElementById('gdfather')let father=document.getElementById('father')let son=document.getElementById('son')gdfather.addEventListener('touchmove',(e)=>{// console.log('gdfather')// e.preventDefault()})father.addEventListener('touchmove',(e)=>{// console.log('father')console.log(e.preventDefault.toString())console.log(e)})let box2=document.getElementById('box2')let inbox=document.getElementById('inbox')let ipt=document.getElementById('ipt')let inIpt=document.getElementById('inIpt')let eventsbox2.addEventListener('keydown',(e)=>{// e.preventDefault()console.log(e===events)})ipt.addEventListener('keydown', (e)=>{console.log(e===events)console.log(JSON.stringify(e)===JSON.stringify(events))events=e})inIpt.addEventListener('keydown', (e)=>{// e.preventDefault()events.preventDefault()console.log(events)})</script></body></html>
e.preventDefault()与return false的区别
事件处理函数的返回值(return false)只对通过属性注册的处理函数才有意义；
也就是说如果我们不是通过addEventListener()函数来绑定事件的话，那么要禁止默认事件的话，用的就是return false；
如果使用addEventListener()或者attachEvent()函数来绑定的话，就要使用e.preventDefault()方法或者设置事件对象的returnValue属性来阻止默认事件。
以上就是js中的e.preventDefault()怎么使用的详细内容，更多关于js中的e.preventDefault()怎么使用的资料请关注九品源码其它相关文章！