3

No código abaixo vem demonstrando uma div clicável para o caso de ser mobile. Quando for full tem um ícone que aparece dentro da div ao passar o mouse por cima, 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>

O código que faz a função do clique é esse abaixo. Eu tentei usar a seguinte síntaxe:

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

Eu quis dizer assim: quando clicar na div com exceção do ícone add-cart me direcionar para a página do produto.

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;
});

Não funcionou. Não sei como faz ou se é possível fazer.
Quero clicar no link dentro da div, mas que não rode a função.


Consegui fazer de um jeito aqui e gostaria de saber se é o correto ou se tem outra maneira de fazer.

O motivo de eu querer a solução acima é que eu precisava aplicar outra função ao ícone. Então eu criei a função agora:

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

Funcionou! Mas funcionou porquê eu coloquei o return false. Daí quando clico no ícone dentro da div, roda essa função primeiro. E com o return false não deixa rodar a função da div.

Deu certo, mas esse é o melhor jeito ? Ou esse jeito é bom ?

1 Resposta 1

2

Neste caso o ideal é adicionar um evento click para o img.add-cart, nele você chama o event.stopPropagation(), desta forma o evento click do div.item não será executado.

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .