猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

请教关于jquery阻止冒泡的问题

如图，我有一个弹窗想点击除轮播区域外的地方关闭弹窗，点击切换按钮实现切换图片

https://img4.mukewang.com/5bf6511100010df612820541.jpg

代码如下

$('.cut-model').bind('click',function(e){

       $(this).hide();//点击空白区域关闭弹窗

})

$('.round').bind('click',function(e){

    e.stopPropagation();//点击切换按钮阻止冒泡

})

然而。。。。并没有成功，点击切换按钮时弹窗仍然关闭，请教各位大神是什么原因，我写的不对吗？谢谢

繁华开满天机
浏览 522回答 1
1回答

汪汪一只猫

<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <title>Title</title>&nbsp; &nbsp; <script type="text/javascript" src="jquery.min.js"></script>&nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; .over-lay{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 300px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 300px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left:50px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top:50px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: rgba(235,235,235,0.5);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .over-lay.hide{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: none;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .content{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: green;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: calc(100% - 60px);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: calc(100% - 0px);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 30px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 0px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .back-button,.forward-button{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 30px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 30px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top:calc(50% - 15px);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left:0px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: red;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 12px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .forward-button{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; right:0px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left:auto;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style>&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; $(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".over-lay").on("click",".back-button,.forward-button",function(event){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log("不关闭overlay");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; event.stopPropagation();//阻止冒泡到.over-lay&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".over-lay").on("click",function(event){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("关闭overlay");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).addClass("hide");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; </script></head><body><div class="over-lay">&nbsp; &nbsp; <div&nbsp; class="back-button">后退</div>&nbsp; &nbsp; <div class="content"></div>&nbsp; &nbsp; <div&nbsp; class="forward-button">前进</div></div></body></html>
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript