Как сделать щелчок на дочернем элементе не считаться кликом на его родительском элементе в jQuery?

Question

Вопрос о том, как обнаружить щелчок на любом месте, за исключением указанного элемента был дан ответ несколько пунктов, как здесь:

Event on a click everywhere on the page outside of the specific div

У меня есть проблема пытается выяснить, как обнаружить щелчок в любом месте кроме данного элемента, включая одного из его детей.

К примеру, в этом коде:

http://jsfiddle.net/K5cEm/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script> 
$(function() { 

$(document).click(function(e) { 
    $('#somediv').hide(); 
}); 
$('#somediv').click(function(e) { 
    e.stopPropagation(); 
}); 

}); 
</script> 

<div style="border: 1px solid red; width:100px; height: 100px" id="somediv"> 

    <span style="display: block; border: 1px solid green; width:50px; height: 50px; margin: 0 auto" id="someSpan"></span> 

</div> 

Щелчок в любом месте вне красного DIV должен вызвать его, чтобы скрыть. Не только это, но и щелчок на его дочернем элементе (зеленый диапазон), должен заставить его скрыть. Единственный раз, когда он не должен скрываться, - это если вы нажмете на него, но не на промежутке. В настоящее время щелчок на пробеле также считается щелчком на родительском div, поэтому он не скрывает div, если щелкнуть по нему.

Как достичь этого?

Answer 1

Вы можете сравнить цели замковых к элементу в вопросе:

$(document).click(function(e) { 
    if (e.target != $('#somediv')[0]) { 
     $('#somediv').hide(); 
    } 
}); 

Дем: http://jsfiddle.net/K5cEm/7/

Answer 2

Добавить это:

$('#somediv').click(function(e) { 
    e.stopPropagation(); 
}).children().click(function(e) { 
    $('#somediv').hide(); 
}); 

Вот ваша обновленная рабочей скрипка: http://jsfiddle.net/K5cEm/5/

Answer 3

Я хотел бы сделать это так:

$(function() { 
    var elem = $('#somediv')[0]; 

    $(document).click(function (e) { 
     if (e.target !== elem) { 
      $(elem).hide(); 
     } 
    }); 
}); 

Live Demo:http://jsfiddle.net/uMLrC/

Так что это

var elem = $('#somediv')[0]; 

кэши ссылка на элемент DIV. Мы хотим кэшировать эту ссылку при загрузке страницы, так что нам не нужно повторно запрашивать этот элемент. И это также улучшает читаемость кода.