Question

使用.on("click",时，是否可以干净地选择当前点击的div而非儿童？

基本上我有一个外部div，当淡入时是100％宽度和100％高度，然后它有一个容器在中间，我的目的是当你点击外部div时它会消失，但不是当你点击内部div。

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

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

Answer 1

试试这个：

$(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。

Answer 2

您可以查看target。如果target是#box，那么您可以致电fadeOut

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

<强> Updated fiddle

Answer 3

<强> DEMO on JsFiddle

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

$(document).on("click", "#box .inner", function(e){
   e.stopPropagation();
});

Answer 4

你有没有考虑让内部div独立于外部div（例如不是孩子）并使用CSS将“内部”框放在你想要的位置？

Answer 5

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

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

JSFiddle

jQuery在单击时使用时仅选择当前元素

5 个答案: