JQuery 中阻止事件冒泡小案例

xiaoxiao2021-02-28  121

冒泡事件问题及效果:

什么是事件冒泡??

本意是: div被点击时才会触发事件,但是,因为事件冒泡特性,未被点击的div也触发了事件的执行; 因此,我们需要阻止事件的冒泡行为; 事件冒泡问题代码展示: <head>     <title></title>     <meta charset="UTF-8">       <script src="jq183.js"></script>      <style>         div{padding: 50px}         #div3{width: 300px;height: 300px;background-color: red}         #div2{width: 200px;height: 200px;background-color: yellow}         #div1{width: 100px;height: 100px;background-color: blue}    </style> </head> <body>     <div id="div3">         <div id="div2">             <div id="div1"></div>         </div>     </div> </body> <script>     $('#div3').click(function(){         alert(3);     })     $('#div2').click(function(event){         alert(2);     })     $('#div1').click(function(){         alert(1);     }) </script> 修改以上代码中 JS 部分,阻止事件冒泡; <script>     $('#div3').click(function(ev){         alert(3);         ev.stopPropagation();     })     $('#div2').click(function(ev){         alert(2);         ev.stopPropagation();     })     $('#div1').click(function(ev){         alert(1);         ev.stopPropagation();     }) </script>
转载请注明原文地址: https://www.6miu.com/read-39557.html

最新回复(0)