84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
如图,我有一个弹窗想点击除轮播区域外的地方关闭弹窗,点击切换按钮实现切换图片
代码如下
$('.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>
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.