Question

<table id="tab">
    <tr><td class="click" id="111">111</td> <td id="222" class="click">222</td></tr>
    <tr><td class="click" id="333">333</td> <td id="444" class="click">444</td></tr>
</table>

<div id="hidden" class="ooo">
   text
</div>


#tab tr td {
padding: 10px;
    border: solid 1px red;
}

#hidden {
    background-color:green;
    width: 40px;
    height: 40px;
    display: none;
}

$(".click").click(function(e){
    $("#hidden").show();
    $("#hidden").offset({top: $(this).offset().top, left: $(this).offset().left+10});
    e.stopPropagation();
})
$(document).click(function() {
    $('#hidden').hide();
});

http://jsfiddle.net/QyRnH/9/

如果点击#hidden，可以禁用#hidden吗？ :)我想隐藏div隐藏只有在#hidden外面点击。

Answer 1

答案已在您的代码中。基本上，您希望停止#hidden div上的click事件冒泡到文档元素：

$("#hidden").click(function (e) {
    e.stopPropagation();
    // do stuff

});

http://api.jquery.com/event.stopPropagation/

Answer 2

您可以通过查看$(document).click来检测event.target功能中确切点击了哪个元素。因此，您只需比较其id，并确保它不是#hidden。

$(document).click(function(event) {
    if (event.target.id != 'hidden') {
       $('#hidden').hide();  
    }
});

这是您更新的JSFiddle：http://jsfiddle.net/QyRnH/15/

document.click没有一个div

2 个答案: