Doubts about Javascript and HTML

Question

Guys, here’s the thing, I’m trying to make a move only it’s not coming out like I hope.

*HTML code *

<div id="apresentar">
    <img src="img2/fechar.png" class="fechar-foto">
    <div id="foto-grande" ><img src="" width="100%" height="100%"><p></p></div>
    </div>
<header>
    <div id="logo"><a href="index.html"><img src="img2/Logo.png" width="220" height="220"  class="logo zoom" alt="Página Inicial"></a></div>
    <div id="sociais">
        <a href="https://www.facebook.com/BlitzHaus" target="_blank"><img src="img/facebook.png" class="fade" alt="Facebook"></a>
        <a href="https://twitter.com/blitz_haus" target="_blank"><img src="img/twitter.png" class="fade" alt="Twitter"></a>
    </div>
</header>
<!--<nav class="fade-in um">-->
<nav>
    <ul id="menu-principal">
        <span class="ativo-desl"></span>
        <li><a href="index.html">HOME</a></li>
        <li><a href="programacao.html">PROGRAMAÇÃO</a></li>
        <li><a href="parceiros.html">PARCEIROS</a></li>
        <li><a href="galeria.html" class="ativo" id="selecionado">GALERIA</a></li>
        <li><a href="localizacao.html">LOCALIZAÇÃO</a></li>
        <li><a href="contato.html">CONTATO</a></li>
    </ul>
</nav>
<div class="clear"></div>
<div id="corpo">
    <section id="breadcrumb" class="fade-in um"><a href="index.html"><span>Home</span></a><span> > </span><span class="ativo">Galeria de Fotos</span></section>
    <div id="conteudo">
        <h1 id="titulo-principal" class="fade-in dois">GALERIA DE FOTOS</h1>
        <img src="img2/galeria/img01.jpg" class="img-galeria fade-in tres" alt="Foto1">
        <img src="img2/galeria/img02.jpg" class="img-galeria fade-in tres" alt="Foto2">
        <img src="img2/galeria/img03.jpg" class="img-galeria fade-in tres" alt="Foto3">
        <img src="img2/galeria/img04.jpg" class="img-galeria fade-in quatro" alt="Foto4">
        <img src="img2/galeria/img05.jpg" class="img-galeria fade-in quatro" alt="Foto5">
        <img src="img2/galeria/img06.jpg" class="img-galeria fade-in quatro" alt="Foto6">
        <img src="img2/galeria/img07.jpg" class="img-galeria fade-in cinco" alt="Foto7">
        <img src="img2/galeria/img08.jpg" class="img-galeria fade-in cinco" alt="Foto8">
        <img src="img2/galeria/img09.jpg" class="img-galeria fade-in cinco" alt="Foto9">
        <img src="img2/galeria/img10.jpg" class="img-galeria fade-in cinco" alt="Foto10">
        <img src="img2/galeria/img11.jpg" class="img-galeria fade-in cinco" alt="Foto11">
        <img src="img2/galeria/img12.jpg" class="img-galeria fade-in cinco" alt="Foto12">
        <img src="img2/galeria/img13.jpg" class="img-galeria fade-in cinco" alt="Foto13">
    </div>
</div>

Javascript code

$(function(){
$("#conteudo img").click(function(){
    var image = $(this).attr('src');
    var legenda = $(this).attr('alt');
    $("#apresentar").fadeIn(300);
    $("#foto-grande").fadeIn(300);
    var vlr = $(this).position().top / 2;
    $('#apresentar').css('top',vlr)
    $('html, body').animate({ scrollTop: vlr}, 400);
    $('#foto-grande img').attr('src', image); 
    $('#foto-grande p').text(legenda);
    $('#foto-grande').hover(function(){ $('#foto-grande p').fadeIn(300)} , function (){$('#foto-grande p').fadeOut(300)});
    document.body.style.overflow='hidden';
    $('#apresentar').click(function(){ $('#apresentar').fadeOut(300); document.body.style.overflow='';});
  });
});

function fechar(){
$('#apresentar').fadeOut(300);
document.body.style.overflow='';
}

I’m trying to do the following, when the person clicks on the present div he closes the div, and when the person clicks on the photo-large div does nothing, like facebook. But when I click on the photo-large div, it closes by being inside the present div.

Please help me out :'( .

Answer 1

The idea is to add a Handler to the event onclick of the daughter div, but return false in this event. This will cause the event to stop being processed, and thus div father will not be hidden.

I made a Fiddle to exemplify:

https://jsfiddle.net/4jucz895/

In it, it is obviously simplified, as I have not added images or other elements within the div. But the idea is this, just expand to the elements that you do not untangle that propagates the event onclick.

To simplify this, you could even create a class click-prevent, for example, and add to div'which must not allow the event to spread onclick, thus creating a generic JS solution:

<div id="apresentar">
    <div class="click-prevent"></div>
</div>
<script>
    $(function () {
        $("#apresentar").click(function () {
            $(this).fadeOut(100);
        });
        $(".click-prevent").click(function () { return false; });
    });
</script>

Selection of DIV

I will answer the question asked in comment by modifying the above example.

Imagine you own several div's with id="apresentar", and that the behavior of all must be equal, hiding them only when the click is made on them.

You could implement this behavior using CSS selectors, in particular the selector >, referring to the immediate child element.

Imagine the HTML:

<div id="apresentar">
    <div id="filha">
        <div id="neta">
        </div>
    </div>
</div>
<div id="apresentar">
    <div id="filha">
        <div id="neta">
        </div>
    </div>
</div>

Using the selector #apresentar div, we would select all the div's within the div#apresentar. If we use #apresentar > div, we select only the div'daughters (not "granddaughters", etc.) of div#apresentar.

Look at this other Fiddle: https://jsfiddle.net/carwmhLc/2/

Note that the red CSS has been applied to all div, be they daughters or granddaughters. But the CSS that applies the white color, was applied only to div daughter of div#apresentar. This occurs because of the selector >.

Note also that we use this selector with jQuery. Click on div'red s, the alert is fired once because of the event onclick registered in the red, and another because of the event onclick registered in white. Additionally, we have a third time that the event is triggered because of jQuery’s behavior of not replacing callbacks, but rather accumulate them and fire all register at the same event.