如图，我有一个弹窗想点击除轮播区域外的地方关闭弹窗，点击切换按钮实现切换图片
代码如下
$('.cut-model').bind('click',function(e){ $(this).hide();//点击空白区域关闭弹窗}) $('.round').bind('click',function(e){ e.stopPropagation();//点击切换按钮阻止冒泡})
然而。。。。并没有成功，点击切换按钮时弹窗仍然关闭，请教各位大神是什么原因，我写的不对吗？谢谢
Ask about jquery preventing bubbling? -PHP Chinese website Q&A-Ask me about jquery preventing bubbling? -PHP Chinese website Q&A
Let’s take a look and learn.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="jquery.min.js"></script> <style> .over-lay{ width: 300px; height: 300px; position: absolute; left:50px; top:50px; background-color: rgba(235,235,235,0.5); } .over-lay.hide{ display: none; } .content{ background-color: green; width: calc(100% - 60px); height: calc(100% - 0px); border-radius: 10px; position: absolute; left: 30px; top: 0px; } .back-button,.forward-button{ width: 30px; height: 30px; position: absolute; top:calc(50% - 15px); left:0px; background-color: red; font-size: 12px; } .forward-button{ right:0px; left:auto; } </style> <script> $(function(){ $(".over-lay").on("click",".back-button,.forward-button",function(event){ console.log("不关闭overlay"); event.stopPropagation();//阻止冒泡到.over-lay }); $(".over-lay").on("click",function(event){ console.log("关闭overlay"); $(this).addClass("hide"); }); }); </script> </head> <body> <div> <div class="back-button">后退</div> <div></div> <div class="forward-button">前进</div> </div> </body> </html>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ask about jquery preventing bubbling? -PHP Chinese website Q&A-Ask me about jquery preventing bubbling? -PHP Chinese website Q&A
Let’s take a look and learn.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="jquery.min.js"></script> <style> .over-lay{ width: 300px; height: 300px; position: absolute; left:50px; top:50px; background-color: rgba(235,235,235,0.5); } .over-lay.hide{ display: none; } .content{ background-color: green; width: calc(100% - 60px); height: calc(100% - 0px); border-radius: 10px; position: absolute; left: 30px; top: 0px; } .back-button,.forward-button{ width: 30px; height: 30px; position: absolute; top:calc(50% - 15px); left:0px; background-color: red; font-size: 12px; } .forward-button{ right:0px; left:auto; } </style> <script> $(function(){ $(".over-lay").on("click",".back-button,.forward-button",function(event){ console.log("不关闭overlay"); event.stopPropagation();//阻止冒泡到.over-lay }); $(".over-lay").on("click",function(event){ console.log("关闭overlay"); $(this).addClass("hide"); }); }); </script> </head> <body> <div> <div class="back-button">后退</div> <div></div> <div class="forward-button">前进</div> </div> </body> </html>