CODEWITHSUNDEEP
javascriptcsshtml
Saadi SLM
Saadi SLM

Reputation: 31

<div> tag with clickable link with <a> tag inside

So I m using a tag with a whole block used as a link, it is a product display so you click it it goes to product page. Now on in that I created an tag as a button for a link to the cart page. So I have it working, but when i click the CART button both pages open the product and the cart. I know its doing that because the cart button is within the block that is a link. I did 2 versions and they both don't work! But how do I fix it ??

version1:

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

Version2:

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

Upvotes: 2

Views: 85

Answers (4)

Unmitigated
Unmitigated

Reputation: 89224

You need to stop the event from bubbling up the DOM tree with event.stopPropagation().

<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" id="cartlink" class="btn btn-default"><i class="glyphicon glyphicon-shopping-cart"></i> Add to cart</a> </div>
  </div>
  <script>
  document.getElementById("cartlink").addEventListener("click", function(event){
    event.stopPropagation();
  });
  </script>

Upvotes: 0

Maniruzzaman Akash
Maniruzzaman Akash

Reputation: 5025

You can just use onclick and the location.href and by passsing link inside this,

<div onclick="location.href='your_url'">
 ....
</div>

Upvotes: 0

LS_
LS_

Reputation: 7129

It's because of event bubbling, you need to use event.stopPropagation() to avoid this behaviour.

    <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" onClick="event.stopPropagation()" class="btn btn-default"><i class="glyphicon glyphicon-shopping-cart"></i> Add to cart</a> </Div>
    </Div>

Upvotes: 1

shaunmwa
shaunmwa

Reputation: 136

You can use stopPropagation. Without seeing your code can’t be 100% sure but something like this:

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

Upvotes: 1

Related Questions