javascript - 单击内部按钮时防止单击父A标签
问题描述
我对索引页面上的产品卡有疑问。在产品卡内,我有 Vue 组件来呈现表单(数量和添加到购物车按钮)。当我点击添加到购物车按钮时,我得到了预期的结果。响应被发送到根 vue 组件,然后我看到产品已添加到购物车的 toast 通知。但是,当我单击加号、减号按钮或输入字段时,会从父 A 标记触发 href 链接。
如何禁用它?单击 div 内的按钮时,我发现此防止单击父级
但它只有在我将 A 标签放入 vue 组件时才有效。我不想在 vue 中放入太多的 html。
@foreach ($products as $product)
<a href="{{ $category->fullpath.'/'.$product->sef }}" class="catalog__card">
<div class="catalog__card-img"><img src="/storage/img/products/{{ $product->mediumpic }}" alt="{{ $product->title }}"></div>
<div class="card__properties">
<div class="card__price"><span>{{ $product->price }}<span class="currencySymbol">₽</span></span></div>
<div class="card__stock">
@if ( $product->stock > 0 )
<i class="far fa-check-circle text-success"></i><span class="text-success"><strong> on stock</strong></span>
@else
<span><strong> on request</strong></span>
@endif
</div>
<addtocart @added_to_cart="updateCart"></addtocart>
</div>
<div class="catalog__card-title"><span>{{ $product->title }}</span></div>
</a>
@endforeach
在 Vue 组件中,我有以下内容
<template>
<div class="cart">
<form method="POST" id="add_to_cart" action="/add_to_cart" @submit.prevent="onSubmit">
<input type="hidden" name="_token" :value="csrf">
<div class="quantity">
<button type="button" class="minus_quantity" v-on:click="minus_quantity" v-long-press="300" @long-press-start="longMinusStart" @long-press-stop="longMinusStop">-</button>
<input type="number" class="input-text qty text" step="1" min="1" max="9999" name="quantity" value="1" title="Qty" v-model.number="quantity">
<button type="button" class="plus_quantity" v-on:click="plus_quantity" v-long-press="300" @long-press-start="longPlusStart" @long-press-stop="longPlusStop">+</button>
</div>
<button type="submit" name="add-to-cart" class="button-cart"><i class="fas fa-cart-plus"></i><span> order</span></button>
</form>
</div>
</template>
<script>
import LongPress from 'vue-directive-long-press';
export default {
name: "addtocart",
data: function () {
return {
csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
quantity: 1,
plusInterval: null,
minusInterval: null,
success: false,
errors: []
}
},
directives: {
'long-press': LongPress,
},
props: [],
computed: {
getName(){
return this.$store.getters.Name
}
},
methods: {
// add to cart quantity plus and minus buttons
// short mouse click event
parent() { alert('you clicked the parent') },
minus_quantity() {
if (this.quantity > 0) {this.quantity -= 1}
},
plus_quantity() {this.quantity += 1},
// long press buttons
longPlusStart() {
this.plusInterval = setInterval(() => {
this.quantity += 1
}, 100)
},
longPlusStop() {
clearInterval(this.plusInterval)
},
longMinusStart() {
this.minusInterval = setInterval(() => {
if (this.quantity > 0) {this.quantity -= 1}
}, 100)
},
longMinusStop() {
clearInterval(this.minusInterval)
},
onSubmit() {
axios.post('/add_to_cart', this.$data)
.then(this.onSuccess)
.catch(error => this.errors = error.response.data);
},
onSuccess(response) {
this.success = true;
this.$emit('added_to_cart', response);
},
},
mounted() {
},
}
</script>
解决方案
您可以对加号、减号按钮使用“v-on:click.stop”指令,而不是“v-on:click”
阅读本文以获取更多信息https://vuejs.org/v2/guide/events.html
推荐阅读
- python - 'CreateForm' 对象在表单验证中没有属性 'user'
- prestashop - 在 Prestashop 中获取模块版本
- android - 需要 Gradle 版本 2.2。当前版本是 4.4 错误
- react-native - 当应用程序已经打开时,Deeplink 在 react-native ios 上不起作用
- c++ - 如何使用 Boost 库实现 SortedVector API?
- windows - 如何在windows系统(nginx)上安装nginx模块
- azure - 是否可以使用内置 blob 触发器为每个新 blob 触发逻辑应用?
- c++ - 了解将对象插入向量时的构造、复制和销毁
- python - 在 .csv 中切片和编辑日期
- java - 玩 Mapping 忽略 RawSQL Ebean