javascript - 在 Carousel 之外点击返回首页

Question

您好，我有一个网页 Carousel.html，其中我的轮播显示有以下代码:

                <div id="carouSel" class="carousel slide" data-ride="carousel">

                    <div class="carousel-inner" role="listbox" id="carousel-inneR">
                        <div class="item active">
                            <img class="first-slide" src="././img/Carousel_img/Jimmy_Lannon_21.jpg" alt="First slide">
                                <div class="container">
                                </div>
                        </div>
                        <div class="item">
                            <img class="second-slide" src="././img/Carousel_img/Jimmy_Lannon_22.jpg" alt="Second slide">
                                <div class="container">
                                </div>
                        </div>
                        <div class="item">
                            <img class="third-slide" src="././img/Carousel_img/Jimmy_Lannon_23.jpg" alt="Third slide">
                                <div class="container">
                                </div>
                        </div>
                    </div>

                    <a class="left carousel-control" href="#carouSel" role="button" data-slide="prev" id="preV" >
                        <img class="left-chevron" src="././img/left_chevron.png" aria-hidden="true"/>
                    </a>
                    <a class="right carousel-control" href="#carouSel" role="button" data-slide="next" id="nexT" >
                        <img class="right-chevron" src="././img/right_chevron.png" aria-hidden="true"/>
                    </a>

                    <div class="artist-name">
                        <h2>JIMMY LANNON</h2>
                    </div>
                </div><!-- /.carousel -->

然后我有以下 JQuery 代码:

    $(document).click(function(e) {   
    if(e.target.id !==('#carouSel')) {
        $(".carousel").hide();   
    } 
});

这似乎行不通 - 我想要的是轮播仅在我点击它外部时隐藏，但如果我只是点击任何地方它就会隐藏。

Answer 1

这是我通常处理此类事情的方式。您必须确保听取主体的意见，而不是文件。

$('body').on('click', function(e) {
   $('#carouSel').hide();
});

$('#carouSel').on('click', function(e) {
   e.stopPropagation();
});

关键是使用 e.stopPropagation() 停止轮播中点击事件的冒泡；这样，它永远不会到达 body 元素的点击监听器。