溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“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 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>事件處理函數的返回值(return false)只對通過屬性注冊的處理函數才有意義；
也就是說如果我們不是通過addEventListener()函數來綁定事件的話，那么要禁止默認事件的話，用的就是return false；
如果使用addEventListener()或者attachEvent()函數來綁定的話，就要使用e.preventDefault()方法或者設置事件對象的returnValue屬性來阻止默認事件。
讀到這里，這篇“js中的e.preventDefault()怎么使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
