Javascript 单击旋转木马外部返回主页

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

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

---

这似乎不起作用-我想要的是，旋转木马只有在我单击其外部时才被隐藏，但如果我只单击任何位置，它就会被隐藏。

您必须像这样将click listener附加到主体上：

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

---

必须将click listener连接到主体，如下所示：

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

---

我通常是这样处理的。你必须确保听正文而不是文件

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

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

---

关键是使用e.stopPropagation（）停止旋转木马中的click事件冒泡；这样，它将永远不会到达body元素click listener

我通常是这样处理的。你必须确保听正文而不是文件

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

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

---

关键是使用e.stopPropagation（）停止旋转木马中的click事件冒泡；这样，它将永远不会到达body元素click listener

另一种方法是检查carouSel的父ID，因为此时您只检查目标的值，该值可能是图像标签ID等的值

      $(document).ready(function(){
                    $('body').click(function(e) {  
                        if($(e.target).parents('#carouSel').length == 0){
                             $(".carousel").hide();   
                        } 
                    });

                  });

---

另一种方法是检查carouSel的父ID，因为此时您只检查目标的值，该值可能是图像标记ID等的值

      $(document).ready(function(){
                    $('body').click(function(e) {  
                        if($(e.target).parents('#carouSel').length == 0){
                             $(".carousel").hide();   
                        } 
                    });

                  });

---

您需要为停止prapagate事件添加return false

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

---

您需要为停止prapagate事件添加return false

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

---

这是伟大的，除了转盘控制停止工作？有没有办法确保旋转木马仍然工作？@Davtho1983您只需要向每个控件添加直接侦听器。如果您试图添加事件委派，它将无法与StopproPagation一起正常工作这很好，除非转盘控件停止工作？有没有办法确保旋转木马仍然工作？@Davtho1983您只需要向每个控件添加直接侦听器。如果您试图添加事件委派，它将无法与stopPropagationAdd

返回false一起正常工作在
$（“.carousel”）.hide（）之后添加
返回false在
$（“.carousel”）.hide（）之后