How to avoid event from div below object?

Question

I have this code:

<div style="width:200px;height:100px;border:solid 1px" onclick="alert(1)">
  Title
  <br />
  Subtitle
  <div style="float:right">
  <input type="checkbox" />
  </div>
</div>

I want to redirect the user to a url when he clicks on the div (where the alert is now) but I want to allow the user with functionality when he clicks on the checkbox.

Is it possible to allow the checkbox to be clicked and change status without invoking the alert(1) from the div below ?

Answer 1

You need to use event.stopPropagation(); function. This function prevents further propagation of the current event in the capturing and bubbling phases.

<div style="width:200px;height:100px;border:solid 1px" onclick="alert(1)">
Title
<br />
Subtitle
<div style="float:right">
<input type="checkbox" onclick="onCheckBoxCicked(event)"/>
</div>

 function onCheckBoxCicked(event) {
        alert(2)
        event.stopPropagation();
    };