I have a Div inside a Div, I am trying to keep different onClick handlers for both the div, but when Clicked on inner div, Both the event Handlers executes and the one of inner div first excuted and then Oter div,

I dont want to actually execute both.

Code:

<div style="width:100%;height:200px;background-color:yellow" onclick="alert('Div A');return false;">
 This is Div A

<div style="width:20%;height:100px;background-color:red" onclick="alert('Div B');return false;">
This is Div B
</div>
</div>

Jsfiddle: fiddle

I have a Div inside a Div, I am trying to keep different onClick handlers for both the div, but when Clicked on inner div, Both the event Handlers executes and the one of inner div first excuted and then Oter div,

I dont want to actually execute both.

Code:

<div style="width:100%;height:200px;background-color:yellow" onclick="alert('Div A');return false;">
 This is Div A

<div style="width:20%;height:100px;background-color:red" onclick="alert('Div B');return false;">
This is Div B
</div>
</div>

Jsfiddle: fiddle

• javascript
• html
• onclick
• event-handling

4 Answers 4

Just add event.stopPropagation(); inside the onclick of the inside <div>.

Like this :

<div style="width:100%;height:200px;background-color:yellow" onclick="alert('Div A');return false;">
    This is Div A
    <div style="width:20%;height:100px;background-color:red" onclick="event.stopPropagation(); alert('Div B');return false;">
        This is Div B
    </div>
</div>

<div style="width:100%;height:200px;background-color:yellow" onclick=" if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();alert('Div A');return false;">This is Div A
<div style="width:20%;height:100px;background-color:red" onclick=" if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();alert('Div B');return false;"> This is Div B</div>
</div>

add this code in your onclick function

 if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();

fiddle

read more about event capturing and event bubbling here and here

$(document).ready(function () {
    $(".yellow").click(function () {
        alert("Div A");
    });
    $(".red").click(function (objEvent) {
        objEvent.stopPropagation();
        alert("Div B");
    });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:100%;height:200px;background-color:yellow" class="yellow">This is Div A
<div style="width:20%;height:100px;background-color:red" class="red"> This is Div B</div>
</div>

First: don't use inline click handlers. It's unsafe and inline handlers spawn a new js-interpreter on every activation;
Second: use some mechanism to identify your divs (for example data-id or just an id);
Third: using event delegation, you'll need only one handler and you don't have to worry about event capturing/bubbling.

For example:

// append handler to click for anything within the body of your document
document.body.addEventListener('click', reportFromDiv);

// one handler for divs with data-id attribute
function reportFromDiv(evt) {
  var from = evt.target || evt.srcElement;
  // do nothing for elements without the data-id attribute  
  if (!from.getAttribute('data-id')) {
      return true;
  }
  return report(from.getAttribute('data-id'));
}

function report(str) {
   document.querySelector('#report').textContent += 'clicked: ' + str + '\n';
}

<div style="width:100%;height:200px;background-color:yellow" data-id="divA">
 This is Div A
 <div style="width:20%;height:100px;background-color:red" data-id="divB">
  This is Div B
 </div>
</div>
<pre id="report"></pre>