javascript - onClick event is being caught by the parent element along with the clicked element -
i have div , inside there elements.
my parent div has test() function using onclick. in inside parent div there quickview() function using onclick.
now, when 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"> ۹ <i class="fa fa-users"></i> </span> <span class="col-md-6"> <p class="font-size-12 display-inline"> zone <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 <i class="fa fa-shopping-cart"></i></a> </li><li><a href="" class="btn btn-buy btn-sm">details <i class="fa fa-eye"></i></a> </li> </ul> </div> </div>
use event.stoppropogation() prevent click event propogating parent. how 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"> ۹ <i class="fa fa-users"></i> </span> <span class="col-md-6"> <p class="font-size-12 display-inline"> zone <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 <i class="fa fa-shopping-cart"></i></a> </li><li><a href="" class="btn btn-buy btn-sm">details <i class="fa fa-eye"></i></a> </li> </ul> </div> </div>
Comments
Post a Comment