javascript – Click Link within Clickable DIV


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 .


<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 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 class="nome">{!! $prod->produto !!}</div>

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


I meant it like this: when clicking on the div except for the add-cart icon add-cart directs me to the product page.


// 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(){
    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?


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

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

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

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

[], 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('');
  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 class="content">

    <div class="menu">
Scroll to Top