Hide parent αν γίνει κλικ έξω από το child div

[rafinos]

Γεια σας παιδιά!

 

Έστω ότι έχω το παρακάτω:

<div id="parent">
   <div id="child">
     blah blah blah
   </div>
</div>

Το child πιάνει ένα μέρος του width και του height από το parent. Πως θα γίνει με jquery αν κάνω click στο parent αλλά έξω από το child να γίνεται hide όλο τα παραπάνω;

[dominotrix]

Με jquery απλα 

 

$("#parent").click(function(){

    $(this).hide();

});

 

Αν δε λειτουργησει απλα αλλαξε το $ και γραψε: jQuery

 

 

Αν δε θελεις να χρησιμοποιησεις js μπορει να γινει και με css απλα θα πρεπει να χρησιμοποιησεις checkbox hack. Η θεωρια ειναι:

 

input[type=checkbox]:checked{display:none;}

[rafinos]

Ναι αλλά εφόσον το child είναι μέσα στο parent... δεν θα γίνει hide ακόμα και αν κάνω click στο child;

 

Ρωτάω τέτοια χαζά γιατί νομίζω ότι έπαθα αμνησία.

[dominotrix]

Θα κρυφτει φυσικα ακριβως επειδη ειναι μεσα στο parent το child. Αν δεν ηταν, δε θα κρυβοταν! ^^

[rafinos]

Άρα αυτή η λύση δεν μας κάνει.

 

Εγώ θέλω να επιτρέπεται το click μέσα στο child αλλά αν γίνει εκτός αυτού να κλείνει το div.

[dominotrix]

Ωπα τα μπερδεψαμε λιγο. Γραψε αν μπορεις ολα τα conditions.

 

Τι θα γινει αν κανει καποιος κλικ στο παρεντ;

Τι θα γινει αν κανει καποιος κλικ στο child;

Τι θα γινει αν καποιος κανει κλικ στο child και το παρεντ ειναι κρυμμενο;

Τι θα γινει αν καποιος κανει κλικ στο parent και το παρεντ ειναι κρυμμενο;

 

Γενικα ολα τα if

[alou]

Θα τσεκάρεις αν το event target είναι αυτό που θες, δηλαδή 

$('#parent').on('click', function(e){
  if (e.target !== this) {
    return;
  }
    
  console.log('click on parent ONLY')
})

To  this αναφέρεται στο #parent, αν το κλικ έχει διαφορετικό target (δηλαδή κάνεις κλικ σε άλλο στοιχείο) τότε return αλλιώς κάνε αυτό που είναι να κάνεις.

[rafinos]

Η λύση του alou λογικά με κάποιες αλλαγές μπορεί να με βοηθήσει αλλά ακόμα δεν μπορώ να ξεκαθαρίσω στο μυαλό μου το πως.

 

Για να σας δώσω να το καταλάβετε καλύτερα. 

 

Το child είναι ένα popup και το parent είναι το background που κρύβει την σελίδα. Αν πατήσω εκτός του popup θέλω να κλείνει.

 

@dominotrix λες να γράψω όλα τα conditions, αλλά τι condition είναι αυτό που λέει ότι αν γίνει click μέσα στο child τότε μην κλείσεις το parent;

 

Τώρα κολλάω σε κάποια πολύ χαζή λεπτομέρεια που δεν λαμβάνω υπόψη. Είμαι 1000% σίγουρος. 

[alou]

Δεν καταλαβαίνω τι σε προβληματίζει, θες ένα click handler που θα κλείσει το modal αν δεν γίνει κλικ μέσα στο modal αλλά στο overlay, οκ μέχρι εδώ;

$('#overlay').on('click', function(e){
  if (e.target === this) {
    //close modal
  }
})

Μπορείς να δεις και τα pointer events ( pointer-events: none στο modal body στη συγκεκριμένη)

[rafinos]

Δεν καταλαβαίνω τι σε προβληματίζει, θες ένα click handler που θα κλείσει το modal αν δεν γίνει κλικ μέσα στο modal αλλά στο overlay, οκ μέχρι εδώ;

$('#overlay').on('click', function(e){
  if (e.target === this) {
    //close modal
  }
})

Μπορείς να δεις και τα pointer events ( pointer-events: none στο modal body στη συγκεκριμένη)

Α να μπράβο! 

 

Σήμερα δεν ξέρω, είμαι αλλού. 

 

Ευχαριστώ παιδιά! Να 'στε καλά!