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 ?