On click should not work on child

Question

I tried few solutions available in here. I have added those code in JS as comments. My code, please review. I am trying to achieve: Checkbox should not be checked when I click on "more info". Others are working fine.

$('.is-monogram label').on('click', function(e) {
  if (e.target !== this)
    return;
  $('.main-wrapper').slideDown('slow');
  alert('clicked the foobar');
});



/*  $(".is-monogram label").on("click", function(event){
  event.stopPropagation();
  alert( "I was clicked, but my parent will not be." );
 });  */

/* var a = $('.is-monogram .option');
a.on('click', function(e) {
  if (e.target !== this)
    return;
  $('.main-wrapper').slideDown('slow');
  alert( 'clicked the foobar' );
}); 


a.on("click", function(event){
  event.stopPropagation();
  alert( "I was clicked, but my parent will not be." );
}); */

.main-wrapper {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="is-monogram">
  <div class="testing">
    <div class="testing-one">
      <input type="checkbox" id="id_one" name="name_one" value="1" class="class_one">

      <label class="option" for="id_one">Lorem Ipsum Lorem
 <span class="parent-span">
  <span class="parent-child-span">more info</span>
  </span> 
  </label>

    </div>
  </div>
</div>


<div class="main-wrapper">
  Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Sed porttitor lectus nibh. Donec rutrum congue leo eget malesuada. Nulla quis lorem ut libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit. Nulla quis lorem ut
  libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Proin eget tortor risus. Curabitur non nulla sit amet nisl tempus convallis quis
  ac lectus.
</div>

Answer 1

What you most likely looking for here is preventDefault,..

So what we can do is check to see if the actual element we clicked has the class parent-child-span, if it does then we prevent the default action, that would cause the checkbox to be triggered.

So placing the below as the first line will do this.

if(e.target.classList.contains("parent-child-span")) return e.preventDefault();

eg..

$('.is-monogram label').on('click', function(e) {
  //add this line below.
  if(e.target.classList.contains("parent-child-span")) 
    return e.preventDefault();

  if (e.target !== this)
    return;
  $('.main-wrapper').slideDown('slow');
  alert('clicked the foobar');
});



/*  $(".is-monogram label").on("click", function(event){
  event.stopPropagation();
  alert( "I was clicked, but my parent will not be." );
 });  */

/* var a = $('.is-monogram .option');
a.on('click', function(e) {
  if (e.target !== this)
    return;
  $('.main-wrapper').slideDown('slow');
  alert( 'clicked the foobar' );
}); 


a.on("click", function(event){
  event.stopPropagation();
  alert( "I was clicked, but my parent will not be." );
}); */

.main-wrapper {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="is-monogram">
  <div class="testing">
    <div class="testing-one">
      <input type="checkbox" id="id_one" name="name_one" value="1" class="class_one">

      <label class="option" for="id_one">Lorem Ipsum Lorem
 <span class="parent-span">
  <span class="parent-child-span">more info</span>
  </span> 
  </label>

    </div>
  </div>
</div>


<div class="main-wrapper">
  Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Sed porttitor lectus nibh. Donec rutrum congue leo eget malesuada. Nulla quis lorem ut libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit. Nulla quis lorem ut
  libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Proin eget tortor risus. Curabitur non nulla sit amet nisl tempus convallis quis
  ac lectus.
</div>

Answer 2

You are already handling the case where the user clicked on the span with your if (e.target !== this) check.

Just add e.preventDefault() in there to stop it.

  if (e.target !== this){
    e.preventDefault();
    return;
  } 

---

Edited snippet

$('.is-monogram label').on('click', function(e) {
  if (e.target !== this){
    e.preventDefault();
    return;
    }
  $('.main-wrapper').slideToggle('slow');
});





/*  $(".is-monogram label").on("click", function(event){
  event.stopPropagation();
  alert( "I was clicked, but my parent will not be." );
 });  */

/* var a = $('.is-monogram .option');
a.on('click', function(e) {
  if (e.target !== this)
    return;
  $('.main-wrapper').slideDown('slow');
  alert( 'clicked the foobar' );
}); 


a.on("click", function(event){
  event.stopPropagation();
  alert( "I was clicked, but my parent will not be." );
}); */

.main-wrapper {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="is-monogram">
  <div class="testing">
    <div class="testing-one">
      <input type="checkbox" id="id_one" name="name_one" value="1" class="class_one">

      <label class="option" for="id_one">Lorem Ipsum Lorem
 <span class="parent-span">
  <span class="parent-child-span">more info</span>
  </span> 
  </label>

    </div>
  </div>
</div>


<div class="main-wrapper">
  Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Sed porttitor lectus nibh. Donec rutrum congue leo eget malesuada. Nulla quis lorem ut libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit. Nulla quis lorem ut
  libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Proin eget tortor risus. Curabitur non nulla sit amet nisl tempus convallis quis
  ac lectus.
</div>