Tapping on a button within a nested div

Question

Tapping on a button within a nested div

My HTML code looks like this:

<div class="col-lg-3 col-xs-6 individual " style="display: block;">
  <button style="position:relative; z-index:4; padding:8px 7px 8px 30px; font-size:16px; font-family: Calibri,Arial,Tahoma; color:black;" class="excel-button">Bajar Tabla</button>
  <!-- small box-->
  <div data-name="cardColor" class="small-box bg-purple">
    <div class="inner">
      <h4 data-name="title">Semana 9</h4>
      <p data-name="dateRange">26-febrero al 02-marzo</p>
    </div>
    <div class="icon"><i data-name="week" class="fa">9</i></div>
    <a class="small-box-footer" data-name="commentFooter">Sin enviar a revisión&nbsp;&nbsp;<i class="text-warning fa fa-exclamation-triangle"></i></a>
  </div>
  <div class="comment-box text-left" style="display: none;">
    <div data-name="comment" class="comment-inner text-danger" style="margin-right:15px">Este reporte no ha sido enviado a revisión</div>
  </div>
</div>

The outer div functions as a clickable element, and I am attempting to enable the inner button to be clickable as well. However, clicking on the button triggers the actions of the div instead of those associated with the button. How can I ensure that when the user clicks the button, it disregards the div element?

javascript jquery html css

Answer 1

Answer №1

Event bubbling occurs when an event is triggered on an element and then bubbles up to its parent elements with the same event handlers. Most events will bubble up, except for a few like focus. This means that if you click a button, the button's click handler will run first, followed by the click handler of its containing div.

To prevent further propagation of the event, you can use the stopPropagation() method on the event object.

Bubbling refers to events traveling upwards in the DOM tree, while capturing involves events propagating downwards.

For more details, check out this resource!

Answer 2

Event bubbling occurs when an event is triggered on an element and then bubbles up to its parent elements with the same event handlers. Most events will bubble up, except for a few like focus. This means that if you click a button, the button's click handler will run first, followed by the click handler of its containing div.

To prevent further propagation of the event, you can use the stopPropagation() method on the event object.

Bubbling refers to events traveling upwards in the DOM tree, while capturing involves events propagating downwards.

For more details, check out this resource!

Answer 3

Answer №2

Check this out. Make sure to test by clicking on both the div and the button

$(function(){
  $('div').click(function(event){
    alert('you clicked on the div element');
  });
  
  $('button').click(function(event){
    event.stopImmediatePropagation(); //This prevents the div's click event from triggering
    alert('you clicked on the button element');
  });
});

div{
  padding: 20px;
  background: #f4f4f4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <button>Press Me!</button>
</div>

Answer 4

Check this out. Make sure to test by clicking on both the div and the button

$(function(){
  $('div').click(function(event){
    alert('you clicked on the div element');
  });
  
  $('button').click(function(event){
    event.stopImmediatePropagation(); //This prevents the div's click event from triggering
    alert('you clicked on the button element');
  });
});

div{
  padding: 20px;
  background: #f4f4f4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <button>Press Me!</button>
</div>

Tapping on a button within a nested div

Answer №1

Answer №2

Similar questions

The navigation bar refuses to budge towards the right side

Bootstrap 5 is currently validating on submission but neglecting to display hints for invalid fields

Is there a way to mix up the sequence of information when replying?

What is the best way to define a margin according to the size of the device being used

jQuery - issue with toggling class on label/input when clicking rapidly

Updating style of an element by hovering over another

Avoid displaying hidden images or loading content upon clicking a tab

Vue.js Ready event is not firing

Exploring the power of React Hooks with the useState() function and an array filled

Deliver compressed data in gzip format from a Node.js server to the client using socket.io

Reduced artwork slideshow on wide-screen phone orientation

Could you explain the distinction between addClass and attr functions in jQuery?

Implementing camera orientation changes in Three.js upon button click

Utilize jQuery ajax to target a particular recurring input

The battle between jQuery Ajax and browser URL manipulation

Exploring the incorporation of various local fonts in NextJs version 13

Adjust the translateZ value according to the dynamic height of the element

Challenges when sending data to a component in Vue

Unable to access Handlebars variable within the each block

Automatically trigger canvas object with a click