onClick event is being caught by the parent element along with the clicked element

Question

I have a div and inside it there are some elements.

my parent div has a test() function by using onClick. in inside parent div there is a quickView() function by using onClick.

now, when I click on quickView() function, test() function fired .

<div onClick="test();" class="product-inner">
  <h5 class="product-title height-40-px">


    title

    </p>
  </h5>
<hr class="mt8 mb8">
<div class="product-meta">
  <ul class="product-price-list">

    <li><span class="product-save dir-to-right"><strong>7500</strong></span>
    </li>
    <li><span class="product-old-price dir-to-right">120,000</span>
    </li>
    <li><span class="product-price">%95</span>
    </li>
  </ul>
  <hr class="mt0 mb0 mr6 hr-blue">
  <div class="col-md-12 mt10">

    <span class="col-md-6">
      ۹&nbsp;<i class="fa fa-users"></i>
    </span>

    <span class="col-md-6">

      <p class="font-size-12 display-inline">


        zone
        &nbsp;<i class="fa fa-map-marker"></i>


      </p>

    </span>

  </div>

  <ul class="product-actions-list mt35">

    <li><a data-original-title="add cart" class="btn btn-cart btn-sm popup-text" href="#product-quick-view-add-to-cart" onclick="quickView(18730);" data-effect="mfp-move-from-top" data-toggle="tooltip" data-placement="top" title="">cart&nbsp;<i class="fa fa-shopping-cart"></i></a>
    </li><li><a href="" class="btn btn-buy btn-sm">details&nbsp;<i class="fa fa-eye"></i></a>
    </li>
  </ul>
</div>
</div>

Yes because whenever you will click inside that parent div. Onclick function of parent div will called. — Rahul Patel, Sep 13 '16 at 06:28
Possible duplicate http://stackoverflow.com/questions/2015041/two-differents-onclick-on-two-divs-one-over-the-other — Captain Planet, Sep 13 '16 at 06:28

score 2 · Accepted Answer · edited May 31 '19 at 23:57

Use event.stopPropagation() to prevent the click event from propagating to the parent. This is how you use it.

P.S. IE supports e.cancelBubble instead of e.stopPropagation()

function quickView(value, e) {
 if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
  console.log(value);
}

function test() {
  console.log('test Fired');
}

<div onClick="test();" class="product-inner">
  <h5 class="product-title height-40-px">


    title

    </p>
  </h5>
<hr class="mt8 mb8">
<div class="product-meta">
  <ul class="product-price-list">

    <li><span class="product-save dir-to-right"><strong>7500</strong></span>
    </li>
    <li><span class="product-old-price dir-to-right">120,000</span>
    </li>
    <li><span class="product-price">%95</span>
    </li>
  </ul>
  <hr class="mt0 mb0 mr6 hr-blue">
  <div class="col-md-12 mt10">

    <span class="col-md-6">
      ۹&nbsp;<i class="fa fa-users"></i>
    </span>

    <span class="col-md-6">

      <p class="font-size-12 display-inline">


        zone
        &nbsp;<i class="fa fa-map-marker"></i>


      </p>

    </span>

  </div>

  <ul class="product-actions-list mt35">

    <li><a data-original-title="add cart" class="btn btn-cart btn-sm popup-text" href="#product-quick-view-add-to-cart" onclick="quickView(18730, event); " data-effect="mfp-move-from-top" data-toggle="tooltip" data-placement="top" title="">cart&nbsp;<i class="fa fa-shopping-cart"></i></a>
    </li><li><a href="" class="btn btn-buy btn-sm">details&nbsp;<i class="fa fa-eye"></i></a>
    </li>
  </ul>
</div>
</div>

In your javascript function quickView – Shubham Khatri Sep 13 '16 at 06:40 — Shubham Khatri, Sep 13 '16 at 06:40

score 1 · Answer 2 · answered Sep 13 '16 at 06:30

1

Click events are bubbling up from the inner element clicked up to the document root going through all the parents of the clicked element. in order to stop it from propagating up you should use - event.stopPropagation();

answered Sep 13 '16 at 06:30

naortor

2,019
12
26

score 1 · Answer 3 · answered Sep 13 '16 at 06:38

That's how event bubbling works. First the click event is triggered on the element that actually was clicked (a.btn.btn-cart in your case) and then it goes upwards and reaches the parent div with test(). You can prevent further event propagation by passing an event to your quickView() function and calling event.stopPropagation(). Then, your HTML should look like this:

<a class="btn btn-cart btn-sm popup-text" onclick="quickView(event, 18730);">Cart</a>

And your JavaScript function:

function quickView(event, number) {
    event.stopPropagation();
    console.log(number) // Do some stuff with the passed ID.
}

onClick event is being caught by the parent element along with the clicked element

3 Answers3