javascript – Click Link within Clickable DIV

Question:

In the code below is demonstrating a clickable div for the case of being mobile . When full has an icon that appears inside the div when mousing 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 using the following syntax:

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

I meant it like this: when clicking on the div except for the add-cart icon add-cart directs 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;
});

Did not work. I don't know how to do it or if it's possible to do it.
I want to click on the link inside the div , but not run the function.

I managed to do it one way here and I would like to know if it is the right one or if there is another way to do it.

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 set the return false . So when I click on the icon inside the div , it runs that function first. And with the return false it doesn't let the div function run.

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

Answer:

In this case, the ideal is to add a click event to img.add-cart , in which you call event.stopPropagation() , this way the click event 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>
Post Views: 1
Scroll to Top