解决div中嵌套元素时，二者点击事件同时触发

以Angualr为例：

<div class="previewImg" (click)="closeImg()">
    <img id="leftArrow" *ngIf="mid > left" (click)="leftImg($event)" src="../../../assets/community/leftArrow@3x.png"/>
    <img id="pre" src="{{imageUrl}}"/>
    <img id="rightArrow" *ngIf="mid < right" (click)="rightImg($event)" src="../../../assets/community/rightArrow@3x.png"/>
</div>

点击left或right时同时会触发外层的closeImg()事件，此时需阻止JS的冒泡事件。

    closeImg() {
        this.imageUrl = '';
    }
    leftImg(e) {
        alert('left!');
        e.stopPropagation();
    }
    rightImg(e) {
        alert('right!')
        e.stopPropagation();
    }

e.stopPropagation();调用该语句即可只触发内部的点击事件。

转载于:https://www.cnblogs.com/syzdidi/p/10075402.html