Question

我正在尝试创建一个小的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将淡出。

#container点击了#box fadeIn();
点击#box中的项目
#box fadeOut()

为此，我使用以下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();        
});

实际发生的事情

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

点击#container
#box淡入
点击#box img
//执行操作，例如删除
#box淡出
#box淡入

上面列表中的第6号不应该发生，该框不应该淡入。

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

演示

http://jsfiddle.net/8FuBD/

Answer 1

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

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

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

http://jsfiddle.net/ycpFL/

Answer 2

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

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

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

点击jQuery但不点击子点击

2 个答案: