찾다

 >  Q&A  >  본문

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

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

3.png

代码如下

$('.cut-model').bind('click',function(e){
       $(this).hide();//点击空白区域关闭弹窗})
$('.round').bind('click',function(e){
    e.stopPropagation();//点击切换按钮阻止冒泡})

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

phpcn_u747phpcn_u7472857일 전908

모든 응답(2)나는 대답할 것이다

  • 数据分析师

    数据分析师2017-10-01 00:38:56

    버블링을 방지하는 jquery에 대해 알려주세요. -PHP 중국어 웹사이트 Q&A - 버블링을 방지하는 jquery에 대해 물어보세요. -PHP 중국어 홈페이지 Q&A

    꼭 보고 배워보세요.

    회신하다
    0
  • 阿神

    阿神2017-03-03 13:45:59

    <!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>

    회신하다
    0
  • 취소회신하다