onClick事件与被单击的元素一起被父元素捕获

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

本文关键字：元素 一起 事件 单击 onClick      更新时间：2023-09-26

我有一个div，里面有一些元素。

父div通过使用onClick具有test()功能。在父div内部有一个quickView()函数，通过使用onClick。

现在，当我点击quickView()函数，test()函数触发。

<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>

使用event.stopPropagation()来防止点击事件传播到父事件。这就是你如何使用它。

注: IE支持e.cancelBubble而不是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>

Click事件从被单击的内部元素向上冒泡到文档根，遍历被单击元素的所有父元素。为了阻止它向上传播，您应该使用- event.stopPropagation();

这就是事件冒泡的工作原理。首先，click事件在实际被单击的元素上触发(a.b.tn)。(在您的例子中是Btn-cart)，然后向上移动并使用test()到达父div。你可以通过向quickView()函数传递一个事件并调用event. stoppropagation()来阻止事件的进一步传播。然后，你的HTML应该像这样:

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

和JavaScript函数:

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