关于js中e.preventDefault()的具体使用
作者：奔跑的瓦T
背景：
同事在项目中遇到的问题，在项目中导入了某一个组件作为根组件之后，发现原来的子组件中的滚动效果不再生效，因为是移动端的项目，所以这里的滚动效果是通过touchmove事件进行触发的，在对引入的组件进行研究后，发现是在根组件中阻止了touchmove事件的默认事件，也就是调用了e.preventDefault()方法，然后同事们通过阻止冒泡阻止了这个方法的调用，解决掉了因为引入组件而带来的问题，但这却引发了一连串的有关于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 events
box2.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>总结
元素并不拥有事件，实际上，元素只是对事件进行了一个监听。就比如一个人进行一场马拉松比赛，这个人进行比赛的这个过程，就是事件从诞生到结束的整个过程。而在比赛的途中，我们设置了一些里程点，每一场马拉松比赛都会在里程点设置对应的补给，我们规定每到达一个补给点就会进行补给，这个可以看作事件的默认行为。当事件每到达一个里程点时，我们可以在这个里程点做一些事，比如欢呼之类的（也就是设置事件监听），也可以啥都不做。这个里程点就是元素，而欢呼就是元素在监听到这个事件时我们设置的行为。
实际上，即使是同一个事件，所拥有的event也是不同的，这个在上面的118和119行可以进行证明，而同一类型的事件在触发时只会拥有这一个event,这一点通过118和115可以证明，对应到马拉松就是每一次马拉松都是不同的，而一条路线上只可能进行一场马拉松比赛。当我们阻止事件冒泡时，相当于我们在跑到23公里时，放弃了这场比赛，那么在32公里处等着为我们欢呼的人就永远不会触发这个动作。而我们在使用event.preventDefault()这个方法时，相当于我们撤掉了所有的里程点的补给，自然也就没有了默认行为，但我们还在跑，原来在32公里处为我们欢呼的人依旧会为我们欢呼。
在通过上面的分析后，已经可以很好的理解为什么在父组件中使用了preventDefault()，而子组件也没有默认行为了，因为所有的补给都被撤掉了。即在这一条线上所有的默认行为都没有了。
e.preventDefault()与return false的区别
事件处理函数的返回值(return false)只对通过属性注册的处理函数才有意义；
也就是说如果我们不是通过addEventListener()函数来绑定事件的话，那么要禁止默认事件的话，用的就是return false；
如果使用addEventListener()或者attachEvent()函数来绑定的话，就要使用e.preventDefault()方法或者设置事件对象的returnValue属性来阻止默认事件。
到此这篇关于关于js中e.preventDefault()的具体使用的文章就介绍到这了,更多相关js e.preventDefault()内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！