Clicking Link Inside Clickable DIV

Question

Clicking Link Inside Clickable DIV

Navigation

#1 by (2 votes)

3

In the code below you are demonstrating a% clickable% in case it is mobile . When full has an icon that appears within div when hovering the mouse, div .

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 does the click function is the one below. I've tried using the following syntax:

hover

I wanted to say this way: when I click on the $(elemento-principal).not(elemento).on() except for the div icon, I go 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 did not work. I do not know how to do it or if it's possible. I want to click on the link inside add-cart , but do not run the function.

I've been able to do it here and I'd like to know if it's the right thing or if there's another way.

The reason I wanted the above solution was 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 div . Then when I click on the icon inside return false , it rotates this function first. And with div does not let the function of return false run.

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

javascript jquery

asked by anonymous 14.01.2016 / 12:59

1 answer

How to configure routes when the application is not in the asp.net mvc server root? How to do a time comparison in sql sever

score 2 · Accepted Answer

In this case the ideal is to add a click event to the img.add-cart , in it you call event.stopPropagation() , thus 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>