点击jQuery但不点击子点击

时间:2012-10-23 17:51:08

标签: jquery jquery-selectors

我正在尝试创建一个小的20x20px div框,单击该框时会打开位于第一个框内的200x200px框:

HTML

<div id="container" style="width:20px; height:20px;">
    <div id="box" style="display:none;width:200px; height:200px;">
        <img src="example1.gif" />
        <img src="example2.gif" />
    </div>
</div>

目标

我的目的是在点击#container时,#box被淡入。然后,用户将点击此框内的图片,#box将淡出。

  1. #container点击了#box fadeIn();
  2. 点击#box中的项目
  3. #box fadeOut()
  4. 为此,我使用以下jQuery:

    $(document).on("click", "#container", function(){
    
        $("#box").fadeIn("fast");
    });
    
    $(document).on("mouseleave", "#box", function(){
    
        $("#box").fadeOut("fast");
    });
    
    $(document).on("click", "#box img", function(){
    
        // Do things, removed for example
    
        $("#box").fadeOut();        
    });
    

    实际发生的事情

    目前它不起作用,因为这种情况发生了:

    1. 点击#container
    2. #box淡入
    3. 点击#box img
    4. //执行操作,例如删除
    5. #box淡出
    6. #box淡入
    7. 上面列表中的第6号不应该发生,该框不应该淡入。

      我认为问题出在.on("click", "#container", function(){这可能是在点击#container #box img时应用该代码,我该如何制止?

      演示

      http://jsfiddle.net/8FuBD/

2 个答案:

答案 0 :(得分:3)

您需要使用event.stopPropagation()。事件正在冒泡,导致div再次淡出。

$(document).on("click", "#box img", function(e){
    e.stopPropagation();
    // Do things, removed for example

    $("#box").fadeOut();        
});​

http://jsfiddle.net/ycpFL/

答案 1 :(得分:2)

更改您的上一部分以使用event.stopPropagation,以便事件不会冒泡到#box元素。

$(document).on("click", "#box img", function(e){

    // Do things, removed for example
    e.stopPropagation();
    $("#box").fadeOut();        
});