background:
The problem encountered by colleagues in the project was that after importing a certain component as the root component in the project, they found that the scrolling effect in the original child component was no longer effective. Because it was a mobile project, the scrolling effect here was triggered by the touchmove event. After studying the introduced components, it was found that the default event of the touchmove event was blocked in the root component, that is, the() method was called. Then the colleagues blocked the call of this method by preventing bubbles, solving the problems caused by the introduction of the component, but this triggered a series of thoughts about the preventDefault() method.
question:
Why am I using preventDefault() on the parent component, blocking the default event causes the default event of my child component to be invalidated?
analyze:
First of all, let’s look at the official website’s explanation of the method (). In the traditional Chinese version of the MDN website, it simply mentions the preset behavior of canceling events without affecting the transmission of events. As literally, it is easy to understand.
In the MDN website of the simplified Chinese version, there are more text descriptions of this event than traditional Chinese versions.
I mentioned a word here, called display processing, and I don’t understand this word very well. The comparison between the traditional and simplified versions can also be said to be the past, so this cannot 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 through Baidu, I couldn't find any answers to this question. There was no way to do it. I could only 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>Contents from ancestors</p>
<p>Contents from ancestors</p>
<p>Contents from ancestors</p>
<p>Contents from ancestors</p>
<p>Contents from ancestors</p>
<p>Contents from ancestors</p>
<p>Contents from ancestors</p>
<p>Contents from ancestors</p>
<p>Contents from ancestors</p>
<div id='father'>
<p>Content in Father</p>
<p>Content in Father</p>
<p>Content in Father</p>
<p>Content in Father</p>
<p>Content in Father</p>
<p>Content in Father</p>
<p>Content in Father</p>
<p>Content in Father</p>
<p>Content in Father</p>
<div id='son'>
<p>Content in the son</p>
<p>Content in the son</p>
<p>Content in the son</p>
<p>Content in the son</p>
<p>Content in the son</p>
<p>Content in the son</p>
<p>Content in the son</p>
<p>Content in the son</p>
<p>Content in the son</p>
</div>
</div>
</div>
</div>
<div id='box2'>
<input type="text">
<div id='inbox'>
<input id='inIpt' type="text">
</div>
</div>
<script>
let gdfather=('gdfather')
let father=('father')
let son=('son')
('touchmove',(e)=>{
// ('gdfather')
// ()
})
('touchmove',(e)=>{
// ('father')
(())
(e)
})
let box2=('box2')
let inbox=('inbox')
let ipt=('ipt')
let inIpt=('inIpt')
let events
('keydown',(e)=>{
// ()
(e===events)
})
('keydown', (e)=>{
(e===events)
((e)===(events))
events=e
})
('keydown', (e)=>{
// ()
()
(events)
})
</script>
</body>
</html>Summarize
The element does not own an event, in fact, the element just listens to the event. For example, if a person is playing a marathon, the process of this person playing a race is the entire process from the birth to the end of the event. During the race, we set some mileage points, and each marathon race will set corresponding supplies at the mileage points. We stipulate that every time we reach a supply point, we will make supplies. This can be regarded as the default behavior of events. Whenever an event reaches a mileage point, we can do something at this mileage point, such as cheering (that is, setting event monitoring), or do nothing. This mileage point is the element, and cheer is the behavior we set when the element listens to this event.
In fact, even for the same event, the event owned is different. This can be proved on the 118 and 119 lines above, while the same type of event will only have this event when triggered. This can be proved through 118 and 115. Corresponding to the marathon, each marathon is different, and only one marathon can be performed on a route. When we stop the event from bubbles, it is equivalent to giving up the race when we run to 23 km, then the person waiting to cheer for us at 32 km will never trigger this action. When we use the() method, it is equivalent to removing all the supplies from mileage points, so naturally there is no default behavior, but we are still running. It turns out that those who cheer for us at 32 kilometers will still cheer for us.
After the above analysis, it is already a good idea to understand why preventDefault() is used in the parent component, and the child component has no default behavior, because all supplies are removed. That is, all the default behaviors on this line are gone.
Difference between () and return false
The return value of the event handler function (return false) is only meaningful for the processing function registered through the attribute;
That is to say, if we do not bind events through the addEventListener() function, then if we want to prohibit the default event, we use return false;
If you use the addEventListener() or attachEvent() function to bind, you must use the() method or set the returnValue property of the event object to block the default event.
This is the end of this article about the specific use of () in js. For more related js () content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!