Click Link Inside Clickable DIV

Question

In the code below comes demonstrating a div clickable in case it is mobile. When you go full has an icon that appears inside the div when passing the mouse over, hover.

HTML

<div class="item" data-filter="{!! $prod->id_categoria !!}" data-categ="{!! $prod->slug_categoria !!}" data-slug="{!! 
$prod->slug !!}">
    <div class="imagem">
        {!! HTML::image('img/produtos/'.$prod->imagem, $prod->produto) !!}
    </div>
    <div class="icons">
        {!! HTML::image('img/details.png', 'Ver Produto', ['class' => 'detail']) !!} 
        {!! HTML::image('img/add-cart.png', 'Adicionar ao Orçamento', ['class' => 'add-cart']) !!}
    </div>
    <div class="nome">{!! $prod->produto !!}</div>
</div>

The code that makes the click function is the one below. I tried to use the following syntax:

$(elemento-principal).not(elemento).on()

I meant, when you click on div with the exception of the icon add-cart direct me to the product page.

JS

// Seleciona Produto
$('.item').not('.item > .icons > .add-cart').on(clickDeviceEvent, function(){
    var prod = $(this).data('filter');
    var catg = $(this).data('categ');
    var slug = $(this).data('slug');
    document.location.href = urlBase + '/produtos/'+catg+'/'+slug;
});

It didn’t work. I don’t know how you do it or if it’s possible to do it.
I want to click on the link inside div, but that does not turn the function.

---

I managed to make a way here and I would like to know if it is correct or if there is another way to do.

The reason I wanted the above solution is that I needed to apply another function to the icon. So I created the function now:

// Add Produto ao Orçamento
$('.item > .icons > .add-cart').on(clickDeviceEvent, function(){
    console.log('Vixi');
    return false;
});

It worked! But it worked because I put the return false. Then when I click on the icon inside div, rotates this function first. And with the return false does not allow the function of the div.

It worked, but this is the best way ? Or this way is good ?

Answer 1

In this case the ideal is to add an event click to the img.add-cart, on it you call the event.stopPropagation(), thus the event click of div.item will not be executed.

var tmplItem = document.getElementById("tmplItem").content;
for (var indice = 1; indice < 20; indice++) {
  var item = document.importNode(tmplItem, true);
  document.body.appendChild(item);
}

var cards = document.querySelectorAll(".card");
console.log(cards);

var onCardClick = function (event) {
  alert("Click no Card");
};

var onIconClick = function (event) {
  alert("Click no icone");
  event.stopPropagation();
};

[].forEach.call(cards, function (card, indice) {
  var icon = card.querySelector(".icon");
  var content = card.querySelector(".content");
  var menu = card.querySelector(".menu");

  console.log(card, icon, content, menu);

  card.addEventListener("click", onCardClick);
  icon.addEventListener("click", onIconClick);
});

.card {
  position: relative;
  width: calc(100% - 20px);
  height: 128px;
  box-sizing: border-box;
  margin: 10px;
  
  box-shadow: 0px 0px 5px black;
  background-color: white;
}

.card .icon {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 128px;
  width: 128px;
  
  background-image: url('http://cdn.flaticon.com/svg/34/34363.svg');
  background-size: calc(100% - 10px);
  background-position: center;
  background-repeat: no-repeat;
  border-right: 1px solid gainsboro;
}

.card .content {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 40px;
  left: 128px;
}

.card .menu {
  position: absolute;
  right: 0px;
  bottom: 0px;
  height: 40px;
  left: 128px;
  border-top: 1px solid gainsboro;
}

<template id="tmplItem">
  <div class="card">
    <div class="icon">

    </div>
    <div class="content">

    </div>
    <div class="menu">
      
    </div>
  </div>
</template>