Ways to avoid Parents Click Event from triggering during a Child's (Grandchild's) click event

Question

Ways to avoid Parents Click Event from triggering during a Child's (Grandchild's) click event

My parent div has a unique feature where clicking on it reveals one of the child divs, and clicking again toggles the visibility of the child div. Inside this child div, there is a switch toggle that functions as a hidden checkbox. The issue I'm facing with my code is that when I click on the switch toggle, it triggers both the switch event and the parent click event.

I have attempted various solutions from Stack Overflow for similar questions, such as using e.stopPropagation(); on the child click event and if(e.target == this) on the parent click event, but none of them have resolved the problem. Any assistance would be greatly appreciated.

Please refrain from marking this as a duplicate, as I have tried all suggested solutions without success. Thank you.

Demo: jsfiddle

javascript html jquery css

Answer 1

Answer №1

Preventing propagation on the checkbox's "change" event does not stop the click event that triggers the change from reaching its ancestors.

To prevent the click event from propagating, you can use the following code on the <label> (or any ancestor between the checkbox and the parent block):

$('.switch').on('click', function(e) {
  e.stopPropagation();
});

Check out this example:

$(".parent-block").on('click', function() {
  $(this).find("i").toggleClass("fa-chevron-down");
  $(this).find("i").toggleClass("fa-chevron-up");
  $(this).children(".second-child").slideToggle();
})

$("input[type=checkbox]").on('change', function() {
  if ($(this).is(":checked")) {
    $(this).closest('.switch-toggle-div').children('.on-off-label').html("ON");
  } else {
    $(this).closest('.switch-toggle-div').children('.on-off-label').html("OFF");
  }
});

$('.switch').on('click', function(e) {
  e.stopPropagation();
});

.parent-block {
  border: 1px solid Blue;
  border-radius: 5px;
  margin-bottom: 9px;
  cursor: pointer;
}

/* CSS styles here */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<div class="parent-block">
  <div class="first-child">
    <p>News</p>
    <i class="fas fa-chevron-down"></i>
  </div>

  /* HTML structure goes here */

</div>

Answer 2

Preventing propagation on the checkbox's "change" event does not stop the click event that triggers the change from reaching its ancestors.

To prevent the click event from propagating, you can use the following code on the <label> (or any ancestor between the checkbox and the parent block):

$('.switch').on('click', function(e) {
  e.stopPropagation();
});

Check out this example:

$(".parent-block").on('click', function() {
  $(this).find("i").toggleClass("fa-chevron-down");
  $(this).find("i").toggleClass("fa-chevron-up");
  $(this).children(".second-child").slideToggle();
})

$("input[type=checkbox]").on('change', function() {
  if ($(this).is(":checked")) {
    $(this).closest('.switch-toggle-div').children('.on-off-label').html("ON");
  } else {
    $(this).closest('.switch-toggle-div').children('.on-off-label').html("OFF");
  }
});

$('.switch').on('click', function(e) {
  e.stopPropagation();
});

.parent-block {
  border: 1px solid Blue;
  border-radius: 5px;
  margin-bottom: 9px;
  cursor: pointer;
}

/* CSS styles here */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<div class="parent-block">
  <div class="first-child">
    <p>News</p>
    <i class="fas fa-chevron-down"></i>
  </div>

  /* HTML structure goes here */

</div>

Ways to avoid Parents Click Event from triggering during a Child's (Grandchild's) click event

Answer №1

Similar questions

Tips for minimizing the padding/space between dynamically generated div elements using html and css

What is the hierarchy for displaying elements depending on the props?

What is the method for attaching multiple listeners to an element?

What is the method for providing a date format choice in JSON?

Validating whether a condition aligns with any element within an array in JavaScript

Check jQuery radio button selection for each iteration of loop

Instructions for making text stand out on a background image and allowing it to move across the image

What steps can I take to avoid res.send() from replacing the entire document?

Can you explain the distinction between max-width and min-width in media queries for HTML and CSS?

Vue Router does not enforce redirects

What steps should I take to ensure that my website can recall the most recent interaction conducted by the user?

Using JQuery Slider to call a function without the need for an ID, instead utilizing the object directly

Finding the smallest value for each day in MongoDB using Mongoose

Utilizing Local Files in a Bootstrap Video Carousel

iPhone users may encounter a freezing issue with the footer when scrolling

Error message 'AVV_ERR_PLUGIN_NOT_VALID' encountered within fastify

Adjust the size of a div using jQuery while toggling text

Is there a way to show a progress bar that functions as the background for a table row

Determine the status of a checkbox in Protractor with JavaScript: Checked or Unchecked?

Looking to extract latitude and longitude data using an Autocomplete Address Form