Background:
For the problems encountered by colleagues in the project, after importing a component into the project as the root component, they found that the rolling effect in the original sub component is no longer effective. Because it is a mobile project, the rolling effect here is triggered by the touchmove event. After studying the introduced component, It was found that the default event of the touchmove event was blocked in the root component, that is, the e.preventDefault() method was called. Then colleagues blocked the call of this method by preventing bubbling, and solved the problems caused by the introduction of components, but this triggered a series of thoughts on the preventDefault() method.
Question:
Why do I use preventDefault() on the parent component to block default events, which will invalidate the default events of my child components?
analysis:
First, let's look at the official website's explanation of the method of event.preventDefault(). In the traditional Chinese version of the MDN website, it simply mentions the default behavior of canceling events without affecting the transmission of events. It's easy to understand.
In the simplified Chinese version of the MDN website, the text describing this event is more than that in the traditional version
I mentioned a word here, called display processing, which I can't understand very well. The comparison between the traditional version and the simplified version can also be said in the past. Therefore, this does not solve our question. Why is this method called on the parent element to prevent the default event, and the default event of the child element also disappears?
Continuous follow-up:
After searching Baidu, I didn't find an answer to this question. There's no way. I have to try to find some conclusive things by myself.
Try:
<!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>Content in ancestors</p>
<p>Content in ancestors</p>
<p>Content in ancestors</p>
<p>Content in ancestors</p>
<p>Content in ancestors</p>
<p>Content in ancestors</p>
<p>Content in ancestors</p>
<p>Content in ancestors</p>
<p>Content in ancestors</p>
<div id='father'>
<p>Father's content</p>
<p>Father's content</p>
<p>Father's content</p>
<p>Father's content</p>
<p>Father's content</p>
<p>Father's content</p>
<p>Father's content</p>
<p>Father's content</p>
<p>Father's content</p>
<div id='son'>
<p>Content in son</p>
<p>Content in son</p>
<p>Content in son</p>
<p>Content in son</p>
<p>Content in son</p>
<p>Content in son</p>
<p>Content in son</p>
<p>Content in son</p>
<p>Content in son</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>
summary
The element does not own events. In fact, the element only listens for events. Just like a person running a marathon,
The process of this person's competition is the whole process from the birth to the end of the event. On the way to the race, we set some mileage points. Each marathon will set corresponding supplies at the mileage points. We stipulate that supplies will be made every time we reach a supply point, which can be regarded as the default behavior of the event. When an event reaches a mileage point, we can do something at this mileage point, such as cheering (that is, setting event monitoring), or we can do nothing. This milestone is the element, and cheering is the behavior we set when the element listens to this event.
In fact, even the same event has different events. This can be proved in lines 118 and 119 above, while the same type of event will only have this event when triggered. This can be proved through lines 118 and 115. Corresponding to the marathon, each marathon is different, and only one marathon can be held on a route. When we stop the event from bubbling, it is equivalent to giving up the game when we run 23 kilometers, so the person waiting to cheer for us at 32 kilometers will never trigger this action. When we use the event.preventDefault() method, it is equivalent to that we withdraw the supplies of all mileage points. Naturally, there is no default behavior, but we are still running. The people who cheered for us at 32km will still cheer for us.
After the above analysis, we can well understand why preventDefault() is used in the parent component, and the child component has no default behavior, because all supplies have been removed. That is, there is no default behavior on this line.
The above is my understanding, hope to correct!!!!