tomole tomole - 10 months ago 58
CSS Question

How to trigger only the inner clickable in clickable div

How to trigger only the inner clickable div in a clickable div?

If u click on the inner blue box both inner and outer onclick events getting triggered but I just want to get the blue one triggered?



.outer {
width: 100px;
height: 50px;
cursor: pointer;
background: green;
}

.inner {
width: 50px;
height: 50px;
cursor: pointer;
background: blue;
}

<div class="outer" onclick="alert('Hello world from outside');" role="button" tabIndex="-1">
<div class="inner" onclick="alert('Hello world form inside');" role="button" tabIndex="-1">
</div>
</div>





enter image description here

Not sure if its necessary to mention but I want to fix this issue in React using sass.

Answer Source

Use event.stopPropagation(); This method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed.

 <div class="outer" onclick="alert('Hello world from outside');" role="button" tabIndex="-1">
  <div class="inner" onclick="alert('Hello world form inside');event.stopPropagation();" role="button" tabIndex="-1">
  </div>
</div>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download