3

使用时是否可以只选择当前单击的 div 而不是子项.on("click",？

基本上我有一个外部 div，当淡入为 100% 宽度和 100% 高度时，它在中间有一个容器，我的目标是当你点击外部 div 时它会同时淡出，但当你点击时不会内部 div。

我在这里创建了一个 jFiddle 来演示这个问题：http: //jsfiddle.net/silver89/kaxsL/

我试过使用div > #box但没有运气所以寻找更多建议？

4

5 回答 5

4

试试这个：

$(document).on("click", "a", function(){
     $("#box").fadeIn("fast");
     return false;
});

$('div#box').on('click',function(e){
    $(this).fadeOut();
});

$('div.inner').on('click',function(e){
   e.stopPropagation();
});

你只需要阻止事件冒泡。你可以做任何你想做的事情来选择任何一个 div。​</p>

于 2012-06-26T19:59:17.907 回答
3

您可以检查target. 如果target是你的#box，那么你可以打电话fadeOut

$(document).on("click", "div > #box", function(e) {
    if (e.target.id === "box") {
        $("#box").fadeOut("fast");
    }
});​

更新的小提琴

于 2012-06-26T19:55:17.127 回答
1

JsFiddle 上的演示

$(document).on("click", "#box", function(){
      $("#box").fadeOut("fast");
});

$(document).on("click", "#box .inner", function(e){
   e.stopPropagation();
});​
于 2012-06-26T20:03:13.677 回答
0

您是否考虑过使内部 div 独立于外部 div（例如，不是其子级）并使用 CSS 将“内部”框定位在您想要的位置？

于 2012-06-26T19:56:30.277 回答
0

event.target是接收事件的元素。如果不是this，它是从后代冒泡的。

$(document).on("click", "div > #box", function(ev){
    if( this == ev.target )
        $("#box").fadeOut("fast");
});

JSFiddle

于 2012-06-26T20:00:39.077 回答