①El evento del elemento principal evita que el elemento secundario se active y el elemento principal vincula el evento para que devuelva falso.
② El evento del elemento secundario evita que se active el elemento principal, y el elemento secundario debe agregar stopPropagation ().
La siguiente es una pequeño caso escrito por mí mismo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
<style>
#one{
width:400px;height:400px;background-color: red;}
#two{
width:200px;height:200px;background-color: green;}
#three{
width:50px;height:50px;background-color: blue;}
</style>
</head>
<body>
<div id="one">
一区
<div style="background-color: yellow;width:300px;height:300px;" id="test">子元素群
<div id="two">二区
<div id="three">三区</div>
</div>
</div>
</div>
<script>
$("#one").click(function(e){
console.log("one")
return false
})
$("#two").click(function(e){
console.log("two")
return false
})
$("#three").click(function(e){
e.stopPropagation()
console.log("three")
})
</script>
</body>
</html>
Solía ser estúpido pensando que el elemento padre evitará eventos de nietos, bisnietos, pero en el elemento padre, el elemento hijo toma la iniciativa e.stopPropagation (), de modo que el elemento hijo no se verá afectado por el evento del elemento padre.