Question

我有一个我正在制作的电子商务网站，我的目标是每个对象有多个输入点，例如，他们点击/点按卡上除按钮外的任何位置，它会转到产品详细信息点击/点击按钮会将该项目添加到购物车。

目前我没有问题向前推进细节，即使按下按钮也会转发到细节。我希望让按钮的操作覆盖路由器。

这是我目前的尝试：

<a *ngFor="let item of list"  >
<div class="col-lg-3 col-md-4 col-xs-6">
    <div class="card" [routerLink]="['/detail', item.item_number]">
    <img style ="width:170px;height:150px; display:block;"alt="170x150" src="{{item.item_image}}">

    <div class="card-block">
    <p class="card-text text-muted">{{item.item_name}}</p>
    <p class="card-text">Size:{{item.item_length}}</p>
    </div>

    <div class="container">        
    <button type="button" class="btn btn-primary btn-block" (click)="addItem()">Add<span [routerLink]="['/detail', item.item_number]" [class.disabled]="disabled ? true : null"></span></button>
    </div>
</div>
</div>
</a>

我希望在按钮中嵌入禁用命令会起作用，但事实似乎并非如此。任何想法都会很棒！

Answer 1

在按钮的点击事件中添加stopPropagation()可以解决问题：

<button type="button" class="btn btn-primary btn-block" 
(click)="addItem();$event.stopPropagation()">Add<span [routerLink]="['/detail', item.item_number]" 
[class.disabled]="disabled ? true : null"></span></button>

这可以防止当前事件在捕获和冒泡阶段进一步传播。详细了解stopPropagation() here。

Answer 2

我希望我所有的 Post DIV 都链接到 Post-Detail 页面，但我也有一个滑块（想想像 Instagram 这样有箭头的东西，用户也可以用手指滑动它）所以我的解决方案是将整个 div 放入带有 routerLink 的 a 标签中，并将滑块放入带有 href="javascript:void(0);" 的标签中和一个 (click)="$event.stopPropagation()" 组件Html代码是这样的：

<a [routerLink]="['/profile','feed-detail',postItem.uniqueCode]">
   <div class="content-wrap" [ngClass]="{'is-hidden': showComments}">
       ...
        <a href="javascript:void(0);" (click)="$event.stopPropagation()">
            <app-carousel>
                ...
            <app-carousel>
        </a><!-- closing the javascript:void(0) a tag-->
   </div> <!-- closing the content-wrap div-->
</a> <!-- closing the routerLink a tag-->

在按钮上覆盖routerLink单击

2 个答案: