Chciałbym wiedzieć, czy jest to właściwy sposób ukrycia widocznych elementów po kliknięciu w dowolnym miejscu strony.
$(document).click(function (event) {
$('#myDIV:visible').hide();
});
Element (div, span itp.) Nie powinien znikać, gdy zdarzenie kliknięcia nastąpi w granicach elementu.
Odpowiedzi:
Jeśli rozumiem, chcesz ukryć element div, gdy klikniesz gdziekolwiek poza elementem div, a jeśli klikniesz nad elementem div, NIE powinien się on zamykać. Możesz to zrobić za pomocą tego kodu:
$(document).click(function() {
alert("me");
});
$(".myDiv").click(function(e) {
e.stopPropagation(); // This is the preferred method.
return false; // This should not be used unless you do not want
// any click events registering inside the div
});
Spowoduje to powiązanie kliknięcia z całą stroną, ale jeśli klikniesz dany element div, anuluje zdarzenie kliknięcia.
.myDivelementu. Na przykład, jeśli masz w środku menu wyboru .myDiv. Po kliknięciu zaznaczenia pomyśli, że klikasz poza polem.
Spróbuj tego
$('.myDiv').click(function(e) { //button click class name is myDiv
e.stopPropagation();
})
$(function(){
$(document).click(function(){
$('.myDiv').hide(); //hide the button
});
});
Używam nazwy klasy zamiast identyfikatora , ponieważ w asp.net musisz się martwić o dodatkowe rzeczy .net dołączane do identyfikatora
EDYCJA - Ponieważ dodałeś kolejny element, będzie działać tak:
$('.myDiv').click(function() { //button click class name is myDiv
e.stopPropagation();
})
$(function(){
$('.openDiv').click(function() {
$('.myDiv').show();
});
$(document).click(function(){
$('.myDiv').hide(); //hide the button
});
});
Od jQuery 1.7 istnieje nowy sposób obsługi zdarzeń. Pomyślałem, że odpowiem tutaj tylko po to, aby zademonstrować, jak mogę to zrobić w „nowy” sposób. Jeśli nie, polecam przeczytanie dokumentacji jQuery dla metody „on” .
var handler = function(event){
// if the target is a descendent of container do nothing
if($(event.target).is(".container, .container *")) return;
// remove event handler from document
$(document).off("click", handler);
// dostuff
}
$(document).on("click", handler);
Tutaj nadużywamy selektorów jQuery i bulgotanie wydarzeń. Zauważ, że upewniam się, że później wyczyściłem procedurę obsługi zdarzeń. Możesz zautomatyzować to zachowanie za pomocą $('.container').one( zobacz: docs ), ale ponieważ musimy zrobić warunki warunkowe w module obsługi, które nie mają tutaj zastosowania.
Poniższy przykład kodu wydaje się działać najlepiej dla mnie. Chociaż możesz użyć „return false”, które zatrzyma całą obsługę tego zdarzenia dla elementu div lub któregokolwiek z jego elementów podrzędnych. Jeśli chcesz mieć kontrolki na pop-up div (na przykład wyskakujący formularz logowania), musisz użyć event.stopPropogation ().
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<a id="link" href="#">show box</a>
<div id="box" style="background: #eee; display: none">
<p>a paragraph of text</p>
<input type="file" />
</div>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var box = $('#box');
var link = $('#link');
link.click(function() {
box.show(); return false;
});
$(document).click(function() {
box.hide();
});
box.click(function(e) {
e.stopPropagation();
});
</script>
</body>
</html>Dzięki, Thomas. Jestem nowy w JS i szalenie szukałem rozwiązania mojego problemu. Twoja pomogła.
Użyłem jquery, aby utworzyć okno logowania, które przesuwa się w dół. Aby uzyskać najlepsze wrażenia użytkownika, postanowiłem, że pudełko zniknie, gdy użytkownik kliknie gdzieś poza pudełkiem. Jestem trochę zażenowany, że poświęcam około czterech godzin na naprawienie tego. Ale hej, jestem nowy w JS.
Może mój kod może komuś pomóc:
<body>
<button class="login">Logg inn</button>
<script type="text/javascript">
$("button.login").click(function () {
if ($("div#box:first").is(":hidden")) {
$("div#box").slideDown("slow");}
else {
$("div#box").slideUp("slow");
}
});
</script>
<div id="box">Lots of login content</div>
<script type="text/javascript">
var box = $('#box');
var login = $('.login');
login.click(function() {
box.show(); return false;
});
$(document).click(function() {
box.hide();
});
box.click(function(e) {
e.stopPropagation();
});
</script>
</body>Możesz też:
$(document).click(function (e)
{
var container = $("div");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.fadeOut('slow');
}
});Jeśli celem nie jest element DIV, ukryj go, sprawdzając, czy jego długość jest równa zero.
Zrobiłem poniżej. Myśl o dzieleniu się, aby ktoś inny również mógł skorzystać.
$("div#newButtonDiv").click(function(){
$(this).find("ul.sub-menu").css({"display":"block"});
$(this).click(function(event){
event.stopPropagation();
$("html").click(function(){
$(this).find("ul.sub-menu").css({"display":"none"});
}
});
});Daj mi znać, jeśli mogę komuś w tej sprawie pomóc.
div#newButtonDivnie zostanie kliknięty. Radziłbym usunąć drugi .click()z linii 4 (jeśli to zrobisz, pamiętaj, aby usunąć nawiasy zamykające, nawiasy i średnik - wiersz 9).
Spróbuj tego:
$(document).mouseup(function (e) {
var div = $("#yourdivid");
if (!div.is(e.target) && div.has(e.target).length === 0)
{
div.hide();
}
});Inny sposób na ukrycie elementu div kontenera, gdy nastąpi kliknięcie w elemencie niebędącym potomkiem;
$(document).on('click', function(e) {
if(!$.contains($('.yourContainer').get(0), e.target)) {
$('.yourContainer').hide();
}
}); $(document).on('click', function(e) { // Hides the div by clicking any where in the screen
if ( $(e.target).closest('#suggest_input').length ) {
$(".suggest_div").show();
}else if ( ! $(e.target).closest('.suggest_container').length ) {
$('.suggest_div').hide();
}
});Tutaj #suggest_input in to nazwa pola tekstowego, a .suggest_container to nazwa klasy ul, a .suggest_div jest głównym elementem div dla mojej autosugestii.
ten kod służy do ukrywania elementów div przez kliknięcie dowolnego miejsca na ekranie. Zanim cokolwiek zrobisz, zapoznaj się z kodem i skopiuj go ...
Spróbuj tego, działa idealnie dla mnie.
$(document).mouseup(function (e)
{
var searchcontainer = $("#search_container");
if (!searchcontainer.is(e.target) // if the target of the click isn't the container...
&& searchcontainer.has(e.target).length === 0) // ... nor a descendant of the container
{
searchcontainer.hide();
}
});$('html').click(function() {
//Hide the menus if it is visible
});
$('#menu_container').click(function(event){
event.stopPropagation();
});ale musisz też o tym pamiętać. http://css-tricks.com/dangers-stopping-event-propagation/
Oto działające rozwiązanie CSS / small JS oparte na odpowiedzi Sandeep Pal:
$(document).click(function (e)
{
if (!$("#noticeMenu").is(e.target) && $("#noticeMenu").has(e.target).length == 0)
{
$("#menu-toggle3").prop('checked', false);
}
});Wypróbuj, klikając pole wyboru, a następnie poza menu:
To nie działa - ukrywa .myDIV po kliknięciu w nim.
$('.openDiv').click(function(e) {
$('.myDiv').show();
e.stopPropagation();
})
$(document).click(function(){
$('.myDiv').hide();
});
});
<a class="openDiv">DISPLAY DIV</a>
<div class="myDiv">HIDE DIV</div>Tylko 2 małe ulepszenia powyższych sugestii:
zatrzymać propagację w zdarzeniu, które to wywołało, zakładając, że jest to kliknięcie
jQuery(thelink).click(function(e){
jQuery(thepop).show();
// bind the hide controls
var jpop=jQuery(thepop);
jQuery(document).bind("click.hidethepop", function() {
jpop.hide();
// unbind the hide controls
jQuery(document).unbind("click.hidethepop");
});
// dont close thepop when you click on thepop
jQuery(thepop).click(function(e) {
e.stopPropagation();
});
// and dont close thepop now
e.stopPropagation();
});$(document).ready(function(){
$("button").click(function(){
$(".div3").toggle(1000);
});
$("body").click(function(event) {
if($(event.target).attr('class') != '1' && $(event.target).attr('class') != 'div3'){
$(".div3").hide(1000);}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<button class="1">Click to fade in boxes</button><br><br>
<body style="width:100%;height:200px;background-color:pink;">
<div class="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div><body>$( "element" ).focusout(function() {
//your code on element
})$(document).mouseup(function (e)
{
var mydiv = $('div#mydiv');
if (!mydiv.is(e.target) && mydiv.has(e.target).length === 0){
search.slideUp();
}
});Proste rozwiązanie: ukryj element zdarzenia kliknięcia w dowolnym miejscu poza określonym elementem.
$(document).on('click', function () {
$('.element').hide();
});
//element will not Hide on click some specific control inside document
$('.control-1').on('click', function (e) {
e.stopPropagation();
});