Zamykanie jquery kliknięciem nadrzędnym

Chcę zamknąć okno tylko wtedy, gdy kliknięto pop_up (w przeciwieństwie do klikania zawartości div). Na przykład. kliknięcie warstwy tła ukrywa element div. W poniższym kodzie nie chcę, aby zamykał on #pop_up po kliknięciu bota zawartości div tylko na "pop_up".Zamykanie jquery kliknięciem nadrzędnym

Jak mogę to zrobić?

$("#pop_up").click(function() { 
 
    $("#pop_up").hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="pop_up"> 
 
    <div id="pop_up_content"> 
 
    <h1> world </h1> 
 
    </div> 
 
</div>

Źródło

2017-01-14 Tomislav Tomi Nikolic

Można odwołać ten post: http://stackoverflow.com/questions/2728252/ jquery-stoppropagation-bubble-down –

Można użyć event argument kliknięcie, i sprawdzić, czy kliknięcie wewnątrz innego elementu (czy to sam element)

JSFiddle: https://jsfiddle.net/32mz2x3x/1/

$("#pop_up").click(function(event) { 
     if ($(event.target).parents().andSelf().is('#pop_up_content')) { 
     return 
    } 
    $("#pop_up").hide(); 
});

Użyłem parents do sprawdź, czy kliknięcie znajduje się wewnątrz elementu pop_up_content, a ja użyłem andSelf, ponieważ może klikniesz na #pop_up_content (a nie w środku)

Więcej informacji:

Źródło

2017-01-14 20:14:34 Aminadav

Tak, ten, próbowałem zrobić coś takiego wcześniej i teraz widzę gdzie Nie udało mi się! Dzięki stary! Wysoko cenione! –

skorzystać z formularza, który umożliwia przełącznik filtra w połączeniu z :not():

$("#pop_up").on('click', ':not(#pop_up_content)', function (e) { 
    $("#pop_up").hide(); 
});

Źródło

2017-01-14 20:09:23 sweaver2112

Dla z jakiegoś powodu działa on odwrotnie, tak jak gdybyś kliknął pop_up_content, to zamknie pop_up i po kliknięciu pop_up nie zrobi nic. –

czego doświadczamy jest bulgotanie i przechwytywanie zachowanie wydarzeń. Sprawdź tę odpowiedź What is event bubbling and capturing?.

Podejście uproszczeń polegałoby na podłączeniu przycisku onClick do dziecka i zatrzymaniu bulgotania.

$("#pop_up_content").click(function(ev) { 
    ev.preventDefault() 
    ev.stopImmediatePropagation() // best to use to stop other event listeners from being called 
});

Źródło

2017-01-14 20:09:32 FabioCosta

JSBin: http://jsbin.com/hoyizos/edit?html,css,js,output

$("#pop_up").click(function(e) { 
 
    if ($(event.target).is($("#pop_up"))){ 
 
     $("#pop_up").hide(); 
 
    }  
 
});

h1{ 
 
    margin:50px 50px; 
 
    background-color:red; 
 
    display:inline; 
 
} 
 

 
#pop_up_content{ 
 
    background-color:yellow; 
 
} 
 

 
#pop_up{ 
 
    margin:10px; 
 

 
    background-color:green; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script> 
 
</head> 
 
<body> 
 
<div id="pop_up"> 
 
      <div id="pop_up_content">pop_up_content 
 
       <h1> world </h1> 
 
      </div> 
 
I am the pop_up! 
 
</div> 
 
</body> 
 
</html>

Nie anulować zdarzenie stacjonarnego !: The Dangers of Stopping Event Propagation,
używać go tylko wtedy, gdy nie ma innego wyjścia.

Nie należy używać andSelf(), jeśli planowane jest użycie jQuery 3.x, because it is deprecated since v1.8 and will be removed in jQuery v3.

Uwaga: Funkcja ta jest przestarzała i jest alias .addBack(), który powinien być stosowany z jQuery 1.8 i później.

Jeśli używasz jQuery 1.8 < użyj zamiast tego addBack.

Źródło

2017-01-14 20:10:31 Legends

Zamykanie jquery kliknięciem nadrzędnym

Odpowiedz

Powiązane problemy