Всем привет. Поставил обработчик кликов на 2 элемента: родительский и дочерний. Дочерний элемент позиционируется абсолютно, что накладывает его сверху на родительский, т.е. он занимает часть от родительского. Но при клике по элементу, vue отслеживает клик и по родительскому элементу. Как быть? Мне необходимо, чтобы в случае клика по дочернему элементу, родительский элемент никак не это не реагировал.
<template>
<div class="product" @click="openModal">
<div class="image"><img :src="image" alt=""></div>
<div class="info">
<div class="wrap">
<div class="top">
<div class="status">
<p class="status__name">Статус товара</p>
<div class="status__image" @click="test"> //если кликаем сюда, родительский элемент тоже реагирует
<img src="img/cart.png" alt="">
<p>+</p>
</div>
</div>
</div>
<div class="bottom">
<p class="name">{{name}}</p>
<p class="price">{{price}} Р</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['id', 'image', 'name', 'price'],
data: function() {
return {
}
},
methods: {
openModal: function() {
this.$modal.show('hello-world');
},
test: function() {
console.log(123);
}
}
}
</script>
.stop