$ (event.target) ne détecte aucun élément interne

Question

J'ai un élément qui, lorsqu'on clique dessus, affiche un texte interne (initialement défini sur display: none). Je veux ajouter un span dans ce texte interne pour fermer ce texte, mais $(event.target) ne fonctionne pas dans ce cas et je ne sais pas pourquoi. Il est également important de noter que les liens à l'intérieur de ce texte ne fonctionnent pas non plus.

HTML

<div class="blog-block-2"> 
    <div class="blog-entry-language-2"> 
    <h2> Test Header</h2> 
    </div> 

    <div class="blog-entry-main-2"> 

     <div class="blog-entry-image-2"></div> 
     <div class="blog-entry-text-wrap-2"> 
      <h2>Test header <span class="close">X</span></h2> 
      <p> 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. 
      </p> 
      <p> 
       Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. <a href="#">Aenean dignissim</a> pellentesque felis. 
      </p> 
     <div class="overlay"></div> 
     </div> 
    </div> 

    <div class="blog-entry-extra-2"> 
     <h1> Extra tag </h1> 
    </div> 
</div> 

JS

$(".blog-block-2").on("click",function(event){ 
    var target = $(event.target); 
    if(target.is("span")){ 
     console.log("clicked outside"); 
     hideText(); 
    } else { 
     showText(); 
     console.log("clicked"); 
    } 
}) 

jsFiddle:

https://jsfiddle.net/ukbx8m1b/

Answer 1

Si vous voulez utiliser le "X" que vous avez créé dans l'en-tête de texte, vous avez pour le faire ressortir. Actuellement tout est plat donc quand vous cliquez dans cette zone vous obtenez le parent "blog-block-2". Si vous ajoutez position et z-index à l'élément parent et à la classe proche, il fonctionnera comme vous le voulez:

https://jsfiddle.net/ukbx8m1b/1/

.blog-block-2{ 
    display: flex; 
    flex-direction: column; 
    margin-bottom: 150px; 
    position: relative; 
    z-index: 1; 
} 
.close{ 
    position: relative; 
    z-index: 1000; 
}