javascript - <div> 标签，带有可点击链接，内部有 <a> 标签

Question

所以我使用一个带有整个 block 作为链接的标签，它是一个产品显示，因此您单击它会转到产品页面。现在，我创建了一个标签作为购物车页面链接的按钮。所以我可以正常工作，但是当我单击“购物车”按钮时，两个页面都会打开产品和购物车。我知道它这样做是因为购物车按钮位于链接 block 内。我做了两个版本，都不起作用! 但我该如何解决它？

版本1:

 <Div class="col-md-3" onClick="window.open('product.html');"  >
    <Div class="product-thumb">
      <h4>MacBook</h4>
      <img src="image/macbook_1-200x200.jpg" alt="Product">
      <p>Intel Core 2 Duo processor Powered by an Intel Core 2 Duo processor at speeds up to 2.1..</p>
      <p class="price">$3000 USD</p>
      <a href="cart.html;" class="btn btn-default"><i class="glyphicon glyphicon-shopping-cart"></i> Add to cart</a> 
  </Div>

版本2:

<Div class="col-md-3" onClick="window.open('product.html');"  >
    <Div class="product-thumb">
      <h4>MacBook</h4>
      <img src="image/macbook_1-200x200.jpg" alt="Product">
      <p>Intel Core 2 Duo processor Powered by an Intel Core 2 Duo processor at speeds up to 2.1..</p>
      <p class="price">$3000 USD</p>
      <a href="cart.html" class="btn btn-default"><i class="glyphicon glyphicon-shopping-cart"></i> Add to cart</a> </Div>
  </Div>

Answer 1

您可以使用 stopPropagation。没有看到你的代码就不能100%确定，但是像这样:

$(a).click(function(event){
    event.stopPropagation();
});