S.M_Emamian S.M_Emamian - 2 months ago 11
jQuery Question

using a onClick inside a div's onclick

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>

Answer

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

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

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>

Comments